Question

我正在尝试为模态窗口创建叠加层。这是我的css

#overlay {
 position: absolute;
 background: #000;
 width: 100%;
 height: 100%;
 z-index: 9800;
}

问题是图层不会覆盖整个页面。当我向下滚动叠加消失。我错过了什么？

Answer 1

使用fixed定位：

position: fixed;

你应该：

#overlay {
 position: fixed;
 background: #000;
 width: 100%;
 height: 100%;
 z-index: 9800;
}

Answer 2

由于IE6不支持position: fixed，因此我在Modalbox中使用了一个解决方案：

#overlay {
    position: absolute;
    width: 100%; 
    height: 100%;
    z-index: 9999;
    border: 0;
    background-color: #000!important;
}
#overlay[id] { position: fixed; }

在这种情况下，IE将采用position: absolute样式，但每个现代浏览器采用position: fixed的第二个规则。

对于IE，您应该使用一些额外的CSS来防止它可滚动。我通过在正文上设置以下规则来管理它：

{
     width: 100%;
     height: 100%;
     overflow: hidden;
}

如果你在一个加法类中做的更好，当你展示你的叠加层（在JS中）时，它会在body元素上切换。

Answer 3

添加顶部：0，左：0和位置：固定到#overlay。您可以将不透明度css添加到。

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

为模态窗口创建布局

3 个答案: