Question

我知道如何在页面上弹出一个窗口（使用Jquery），我想要做的是约束页面上弹出的窗口，这样当你向下滚动它就不会上升。 “父页面”可能很长，但是当弹出窗口出现时，我希望页面“调整大小”，这样您就无法向下滚动页面。弹出窗口停留，可能就在页面的中心。

好的，我知道我不够清楚。我们来看一些例子。

1）Coursera。如果你从Coursera（你绝对应该）学习课程，当你观看视频时，视频会弹出。但是，当您向下滚动时，视频会上升甚至超出您的视线。这不是我想要的。

2）Pinterest的。单击图片时，将弹出一个新窗口，您可以注意到滚动条状态已更改。它不再是弹出窗口出现之前的那个。

现在我的弹出窗口有一个绝对的位置样式：

.popup{
position: absolute;
top: 40px;
...
}

那么我应该如何设置弹出窗口以便实现目标呢？如果我不清楚任何事情，请询问。

编辑：将弹出窗口固定为这两个答案很棒但是有没有办法根据弹出窗口而不是初始页面进行滚动？这意味着，如果弹出窗口需要滚动才能看到整个内容，您可以滚动，但如果弹出窗口完好无损，则无论初始页面的高度如何都无法滚动。

当下面的答案给出的例子中弹出弹出窗口时，有没有办法让滚动条消失？

Answer 1

你是说这个吗？

.popup {
    position: fixed;
    top: 50%;
}

嗯，它仍然滚动，但弹出窗口保持固定。

Answer 2

这是一个基于Antony答案的crossbrowser解决方案。 IE使用绝对位置而不是固定位置。

.popup {
    position: fixed;
    top: 50%;
}
<!--[if IE]>
    .popup {
        position: absolute;
        top: 50%;
    }
<![endif]-->