jQuery SlideDown with dynamic fixed center

Question

我在jQuery中编写我自己的popUp函数。我动态获取宽度和高度，然后在单击事件后滑动元素。

但不幸的是，在我编写决定高度的部分并设置了中心css后，slideDown函数现在使元素出现在页面的中心并同时向上和向下方向生长，而不是仅折叠它从顶部下来。

问题的主要来源应该是margin-top，我想。

你知道如何解决这个问题吗？

这里是我的代码：

HTML：

<div class="container"> 
<div id="Portfolio"> 
    <div id="PortfolioGrid"> 
     <div class="overlay">overlay</div> 
     <div class="popup"> 
      <div class="close" style="display: none;"> 
       <i class="icn-x"></i> 
      </div> 
      <dl class="beschreibung"> 
       <dt>Beschreibung</dt> 
       <dd>xsssxxsxsxsxssxsxsx</dd> 
       <dt>Aufgabe</dt> 
       <dd>dsfgfdgfgdf</dd> 
       <dt>Kunde</dt> 
       <dd>Bla</dd> 
      </dl> 
     </div> 
    </div> 
</div> 

CSS：

.container { 
    width: 250px; 
} 

.popup { 
    display: none; 
} 
.popup.clone { 
    display: none; 
    z-index: 5002; 
    position: fixed;  
    top: 50%; 
    left: 50%; 
    background-color: #fff; 
    border: 1px solid #ccc; 
} 
.beschreibung { 
    background-color: #fff; 
} 

的jQuery：

$("#Portfolio").on("click", ".overlay", function() { 
      var popup_state_port = false; 
      if(popup_state_port == false) { 

       var klon = $(this).nextAll('.popup').clone(); 
       $(klon).addClass('clone'); 
       $('#PortfolioGrid').after(klon); 
       var width = $('.container').width(); 
       var height = $('.clone').height(); 
       //console.log(width); 
       $('.clone').css({ 
        'width': width, 
        'margin-left': -width/2, 
        'margin-top': -height/2 
       }) 
       $('.clone').slideDown("normal", function() { 
        $(this).find('.close').fadeIn(); 
       }); 
       $(".bg").css("opacity", "0.7"); 
       $(".bg").fadeIn("normal"); 

       popup_state_port = true; 
      } 
      return false; 
     }); 

和小提琴，这样就可以看到效果：FIDDLE

谢谢！

Answer 1

编辑： 好的，希望这是解决方案可用于你。我只使用top垂直集中div。它可以计算在CSS的百分比和像素，calc() 据我知道你需要前缀支持所有浏览器：

$('.clone').css({ 
    'width': width, 
    'margin-left': -width/2, 
    'top': '-moz-calc(50% - '+height/2+'px)', 
    'top': '-webkit-calc(50% - '+height/2+'px)', 
    'top': '-o-calc(50% - '+height/2+'px)', 
    'top': 'calc(50% - '+height/2+'px)' 
}) 

http://jsfiddle.net/27dBE/23/