我正在制作一个在单击链接时出现的弹出框。我希望背景被涂黑并使用透明的全屏 div 来实现这一点。我还希望无论用户在页面上的哪个位置查看,该框都水平和垂直居中。
当我这样做时,黑色叠加层不会延伸到页面底部。 如果向下滚动,页面的其余部分将正常显示。我也无法让弹出窗口正确居中。
Here's a jsFiddle demonstrating.
这是我的代码:
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>
CSS:
#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;
}
最佳答案
关于javascript - 允许滚动的简单全屏透明div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22658212/