爲模態窗口創建佈局

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