Javascript 使用 jquery 在页面中央放置一个叠加层
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5059134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
position an overlay in the center of the page with jquery
提问by Bill
This should be a simple question, but I can't seem to figure it out. I made a popup using jquery, and I want it positioned in the center of the page. No matter how the site is adjusted and the resolution. Right now I'm just positioning it absolutely with CSS but the problem with that is that if you move the page around it doesn't move the overlay and it depends on how much content is on the page. Is there a way to position it with jquery so it will also be in the center of the window?
这应该是一个简单的问题，但我似乎无法弄清楚。我使用 jquery 制作了一个弹出窗口，我希望它位于页面的中心。无论网站如何调整和分辨率。现在我只是用 CSS 绝对定位它，但问题是如果你移动页面，它不会移动覆盖层，这取决于页面上有多少内容。有没有办法用 jquery 定位它，这样它也会在窗口的中心？
Thanks!
谢谢！
回答by Hussein
You do not need jQuery for this. If the purpose is to always have the div in the center of the window, then you can do it with CSS.
为此，您不需要 jQuery。如果目的是始终将 div 放在窗口的中心，那么您可以使用 CSS 来实现。
Check working example at http://jsfiddle.net/5Q6FU/
在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 */
}
回答by Voooza
you can get window dimensions like this:
你可以得到这样的窗口尺寸：
var wWidth = $(window).width();
var wHeight = $(window).height();
then you can get your popup's dimensions:
然后你可以得到你的弹出窗口的尺寸：
var popupWidth = $('#popupId').width();
var popupHeight = $('#popupId').height();
do some calculation:
做一些计算：
var popupTop = (wHeight/2) - (popupHeight/2);
var popupLeft = (wWidth/2) - (popupWidth/2);
and finaly position your popup:
最后定位你的弹出窗口：
$('#popupId').css({'left': popupLeft, 'top': popupTop});
I haven't tested this but you should get the idea to work with.
我还没有测试过这个，但你应该得到这个想法。
//edit btw it would probably work just as css positioning. If you want it to reposition as the page moves you just put the code to function and call it on events when page moves.
//edit btw 它可能会像 css 定位一样工作。如果您希望它在页面移动时重新定位，您只需将代码放入函数并在页面移动时在事件上调用它。
回答by Will
This can be done with CSS. If the popup box is absolute positioned then set left to 50% and margin-left to negative whatever half the width of the box is.
这可以通过 CSS 来完成。如果弹出框是绝对定位的，则无论框的一半宽度是多少，都将 left 设置为 50% 并将 margin-left 设置为负数。
回答by zachallia
There are a few ways to accomplish this, a good one to keep the overlay in the center even if the user resizes the window is by doing the following:
有几种方法可以做到这一点，即使用户调整窗口大小，也可以通过执行以下操作将叠加层保持在中心位置：
var overlay = $("#overlay"),
top = $(window).scrollTop() - (overlay.outerHeight() / 2),
left = -(overlay.outerWidth() / 2);
overlay.css({'margin-top': top,'margin-left': left});
and then have css (you could optionally have position fixed and get rid of the scrollTop in the javascript):
然后有 css （你可以选择固定位置并摆脱 javascript 中的 scrollTop ）：
#overlay {
position: absolute;
top:50%;
left: 50%;
z-index: 1000;
}
