使用 jquery 在页面中心放置一个叠加层答案

【问题标题】：position an overlay in the center of the page with jquery使用 jquery 在页面中心放置一个叠加层
【发布时间】：2011-06-30 20:33:11
【问题描述】：

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

谢谢！

【问题讨论】：

尝试使用position:fixed 而不是position:absolute。

标签： javascript jquery html css center

【解决方案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 */
}

【讨论】：

【解决方案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 定位一样工作。如果您希望它在页面移动时重新定位，您只需将代码放入功能并在页面移动时调用它。

【讨论】：

【解决方案3】：

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

【讨论】：

如果窗口比图片小怎么办？

【解决方案4】：

有几种方法可以做到这一点，即使用户调整窗口大小，也可以通过以下方式将叠加层保持在中心：

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

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

然后有css（你可以选择固定位置并摆脱javascript中的scrollTop）：

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

【讨论】：