使用 jquery 将覆盖层放置在页面的中心

Question

这应该是一个简单的问题，但我似乎无法弄清楚。我使用 jquery 制作了一个弹出窗口，我希望它位于页面的中心。无论网站如何调整、分辨率如何。现在我只是用 CSS 绝对定位它，但问题是，如果你移动页面，它不会移动覆盖层，这取决于页面上有多少内容。有没有办法用 jquery 定位它，使其也位于窗口的中心？

谢谢！

Answer 1

为此，您不需要 jQuery。如果目的是始终让 div 位于窗口中央，那么您可以使用 CSS 来实现。

查看工作示例http://jsfiddle.net/5Q6FU/

<div class="mydiv"></div>

.mydiv{
    width:300px;
    height:300px;
    background:red;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-150px; /* negative half the size of height */
    margin-left:-150px; /* negative half the size of width */
}

Answer 2

你可以得到这样的窗口尺寸：

var wWidth = $(window).width();
var wHeight = $(window).height();

然后你可以得到你的弹出窗口的尺寸：

var popupWidth = $('#popupId').width();
var popupHeight = $('#popupId').height();

做一些计算：

var popupTop = (wHeight/2) - (popupHeight/2);
var popupLeft = (wWidth/2) - (popupWidth/2);

最后定位你的弹出窗口：

$('#popupId').css({'left': popupLeft, 'top': popupTop});

我还没有测试过这个，但你应该得到使用的想法。

//编辑
顺便说一句，它可能会像 css 定位一样工作。如果您希望它在页面移动时重新定位，您只需将代码放入函数中，并在页面移动时在事件上调用它即可。

Answer 3

这可以通过 CSS 来完成。如果弹出框是绝对定位的，则将 left 设置为 50%，将 margin-left 设置为负值，无论框宽度的一半是多少。

Answer 4

有几种方法可以实现这一点，即使用户调整窗口大小，保持覆盖层位于中心的一个好方法是执行以下操作：

var overlay = $("#overlay"),
    top = $(window).scrollTop() - (overlay.outerHeight() / 2),
    left = -(overlay.outerWidth() / 2);

overlay.css({'margin-top': top,'margin-left': left});

然后使用 css （您可以选择固定位置并摆脱滚动顶部JavaScript）：

#overlay {
    position: absolute;
    top:50%;
    left: 50%;
    z-index: 1000;
}