javascript - 元素不会垂直粘在屏幕中间

Question

我一直在尝试使用 JQuery 创建一个模式弹出窗口，但不知何故我无法正确地集中我的元素(关键点是元素始终是集中的，无论您的屏幕分辨率如何)。下面的jsfiddle写的是我想让元素垂直居中的代码(因为水平居中可以用CSS来完成。)

HTML: 测试

CSS:

.ex_event_frame {
    left: 39px;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: 300px;
    overflow: auto;
    background: #2e3030;
    color: #ffffff;
    position: absolute;
    z-index: 101;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 14px;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    -box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    border: 8px solid #105f6b;
}

Javascript:

$(function () {
    var offset = 0,
        viewportHeight = $(window).height(),
        $myDialog = $('#ev-entry');
    $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.Height() / 2));
});

这是我创建的 fiddle :http://jsfiddle.net/8v9k9/2/

我的想法已经用完了，希望我能尽快听到答案。 提前致谢!

Answer 1

DEMO

$(function () {
    $(window).resize(function(){
    var offset = 0,
        viewportHeight = $(window).height(),
        $myDialog = $('#ev-entry');
    console.log(viewportHeight + " "+$myDialog.height() )
    $myDialog.css('top', (offset + (viewportHeight / 2)) - ($myDialog.height() / 2));
    }).resize();
});

---

• 是 .height() 而不是 .Height()
• 它在 $(window).resize() 中，因此它也会在调整大小时进行调整