現在全屏的半透明遮罩層在web2.0網站應用非常廣泛了，絕大多數遮罩是通過計算頁面大小，然后覆蓋一個與頁面同等大小的層實現，如騰訊qzone, wordpress后台。這種方式本來無可非議，但是在頁面很長的時候在IE8下會失效（國外資料的解釋是與機器顯卡相關），有些完美情節的同學遇到這個問題后就抓破了頭，無奈之下甚至想讓IE8強制使用IE7的方式解析他的作品。其實我們有一個更好的方法，咱們用CSS去解決它！
還記得“position:fixed”嗎？它是css2的一個新增的屬性，他可以讓一個元素靜止在頁面上，拖動滾動條也不會動，如Qzone頂部固定的導航欄就是這樣實現的。同樣我們也可以用一個100%高寬的層覆蓋瀏覽器視口，這樣就可以實現全屏遮罩了。不用再計算頁面的大小，調整瀏覽器大小的時候也不要去動態修改尺寸了。
遮罩 CSS:
.divBG
{
background: gray;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
display: none;
z-index: 20;
filter: alpha(opacity=60);
opacity: 0.6 !important;
}
彈出層 CSS:
.PopUp
{
position: fixed;
display: none;
z-index: 21 !important;
background-color: White;
width: 900px;
border-style: solid solid solid solid;
border-width: 5px 5px 5px 5px;
border-color: #cccc99;
left: 50%;
top: 50%;
margin-top: -200px; /*--高度的一半--*/
margin-left: -450px; /*--寬度的一半--*/
}