为模态窗口创建布局

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; 
} 

更好，如果你这样做的，这将body元素上触发了另外上课的时候你展示你的覆盖（在JS）。

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; 
}