打开相对于用户位置的弹出窗口

Question

如何在屏幕中间打开一个弹出窗口（基本上是一个带有高z-index的隐藏div），即使用户向下滚动一点：

• 当我使用position:absolute;left:50%;top:50%;时，弹出窗口会在屏幕中间打开，但当用户向下滚动页面时，窗口会“停滞”在页面中间。

• 当我使用position:fixed;top:50%;left:50%;时，窗口没有“卡住”，但它没有位于屏幕中间（如果用户在打开之前眩晕，则窗口会在开始时打开页面和用户必须向上滚动才能看到它。

我如何实现这两个目标？打开相对于用户当前位置的中心弹出窗口，然后在打开它后将其取下。

（在事件中打开“朋友列表”或“参加/不参加名单”时，可以在Facebook上看到这种弹出窗口。）

Answer 1

position: fixed; top: 50%; left: 50%; width: 600px; height: 400px; margin-left: -300px; margin-top: -200px;
重要的是，margin-left和margin-top为宽度和高度值的负值的一半，以确保弹出窗口恰好位于屏幕中间。
或者，您可以使用position: absolute并使用JavaScript将style.top设置为(document.body.scrollTop + document.documentElement.scrollTop + 100)+"px"，如果您希望它保留在文档的相同位置 - 我认为这是您要追求的那个

Answer 2

您需要在某种程度上使用Javascript才能执行此操作，因为您需要知道用户视口的尺寸。

你可以将Javascript放入你的CSS（永远不要这样!!!），或者你可以创建一个实际的Javascript来处理窗口滚动事件。