相对于用户位置弹出一个弹出框

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来处理窗口滚动事件。