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

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!

4 个解决方案

#1

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/

<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

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.

//编辑btw它可能会像css定位一样工作。如果您希望它在页面移动时重新定位,您只需将代码置于运行状态,并在页面移动时调用事件。

#3

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

#4

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