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));
});

这里是我创造的小提琴：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()内，因此它也可以调整大小调整

Answer 2

如果你需要居中一个绝对位置元素，你需要做这个小技巧，不需要jQuery。

改变了的css：

.ex_event_frame {
    width: 300px;
    height: 300px;
    left: 50%; /* Changed CSS */
    top: 50%; /* Changed CSS */
    margin-left: -150px; /* Changed CSS - Change to half of the elements width */
    margin-top: -150px; /* Changed CSS - Change to half of the elements height */
    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;
}

这是一个小提琴：Demo - remove /show in url to view code

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

2 个答案: