jquery - 约束视图中的弹出窗口

Question

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

好吧，我知道我说得不够清楚。让我们看一些例子。

1）课程。如果你曾经从 Coursera 上过一门课程（你绝对应该），当你观看视频时，视频会弹出。但是，当您向下滚动时，视频会上升，甚至会消失在您的视线范围内。这不是我想要的。

2）品脱。当您单击图片时，将弹出一个新窗口，您可以注意到滚动条状态发生了变化。它不再是弹出窗口出现之前的那个。

现在我的弹出窗口有一个绝对位置样式，如下所示：

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

那么我应该如何设置弹出窗口的样式以便实现目标？如果我有什么不清楚的地方，请询问。

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

那么有没有办法在下面的答案给出的示例中弹出弹出窗口时使滚动条消失？

score 1 · Accepted Answer

你是这个意思吗？

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

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

score 1 · Accepted Answer

这是基于安东尼回答的跨浏览器解决方案。IE 使用绝对位置而不是固定位置。

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

2 回答 2