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完成。如果弹出框是绝对定位的，则将左侧设置为50％，将左侧边距设置为负值，无论框的宽度的一半是多少。

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中的scrollTop）：

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

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

4 个答案:

检查http://jsfiddle.net/5Q6FU/