具有动态固定中心的 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 将 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/