具有动态固定中心的jQuery SlideDown

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，这样你就可以看到效果： FIDDLE

谢谢！

Answer 1

编辑：好的，希望这个解决方案对你有用。 我只使用top垂直居中。 可以使用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/