jquery - 具有动态固定中心的jQuery SlideDown

我在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，以便您可以看到效果：FIDDLE

谢谢！

最佳答案

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

$('.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/