Question

必须有一个简单的解决方案。我一直在尝试使用jQuery来完成我正在寻找的效果但是，它只是不太有效......而且我怀疑有一个CSS解决方案来解决这个问题。

我有一个名为“popup”的div，其中包含以下CSS：

#popup {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;}

它覆盖屏幕就像一个覆盖...在这个div中我有另一个名为#pnlEditOverlay的盒子，它是一个包含通知消息或编辑形式或类似的东西。

pnlEditOverlay正是我试图在页面上垂直居中

我使用jQuery将#popup的高度扩展到文档高度，以便它涵盖所有内容：

$("#popup").css('height', $(document).height());

我的问题是，我希望在页面上垂直居中#pnlEditOverlay，即使页面足够大，也可以滚动。

我一直在使用jQuery来重新定位这个div：

var offset = $("#pnlEditOverlay").offset();

        var topPadding = 75;
        $(window).scroll(function () {
            if ($(window).scrollTop() > offset.top) {
                $("#pnlEditOverlay").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#pnlEditOverlay").stop().animate({
                    marginTop: 75
                });
            };
        }).scroll();

然而，这并不是我想要的。它只在页面滚动时重新定位...所以当用户已经在页面中间滚动时，div会被隐藏直到它们滚动。 ..

无论如何。我想知道是否有一个优雅的CSS解决方案。 我很简单想在页面上放置一个盒子死点，即使页面已滚动。我可以使用jQuery来设置div的样式，但我想要避免实施点击事件，因为有许多MANY按钮可能导致显示div。

所以问题是，是否有一个CSS样式或一小段jQuery将垂直居中并保持在那里，即使页面滚动了？

由于

Answer 1

确实有一个简单的CSS解决方案。首先，将其用于popup：

#popup
{
position:fixed;
height:100%;
width:100%;
}

这适用于您的overlay：

#overlay
{
position:fixed;
top:50%;
left:50%;
margin-top:-y;
margin-left:-x;
}

其中 x 和 y 分别是一半 overlay div的宽度和高度。所以你需要知道这个div的高度和宽度。

这将解决您的所有问题，即使页面将会滚动。

Answer 2

打开弹出窗口时，您需要考虑窗口的初始滚动偏移量。您需要使用Javascript将其重新定位到窗口最顶部可见像素的当前值，而不是将其置于绝对0的顶部位置。我相信这是offsetHeight参数，但我还没有测试过。

同样FWIW，Jquery中没有“模态对话框”选项可以满足您的需求吗？那是不是因为某些原因而无效？

即使页面可滚动，也可以在屏幕上居中显示div

2 个答案: