Javascript 简单的全屏透明div，允许滚动

我正在制作一个弹出框，当点击链接时出现。我希望背景是黑色的，我用一个透明的全屏div来实现这一点。我还希望框水平和垂直居中，而不管用户在页面上看什么

当我这样做时，黑色覆盖层不会延伸到页面底部如果向下滚动，页面的其余部分将正常显示。我也无法使弹出窗口正确居中。

这是我的代码：

HTML:

<div id="overlay">
    <!--- Make a really long page for demo --->
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
</div>

<div id="popup">Here is some text</div>

#overlay
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

#popup
{
    left: 30%;
    top: 40%;
    background-color: #FFF;
    z-index: 222;
    width: 300px;
    height: 200px;
    position: absolute;
}

---

您需要将

绝对

定位更改为

固定

定位，如下所示：

position: fixed;

---

使用

position:fixed

css属性来修复屏幕上的div，而不管滚动位置如何。