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/