效果：使用Windows系統的用戶在關機的時候，出現的界面只允許用戶選擇關機、註銷或取消動作，而桌面上的程序都不能使用，並且屏幕呈現灰色狀態。 Windows關機效果如圖22.1所示。
網頁中使用此效果好處：在網頁上運用這種關機效果有什麼好處呢？首先，由於單擊某一鏈接後，將用戶此時不可用的操作隱藏在後台，將可用的操作放在屏幕最上層，並高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應該注意的事項。
原理：在網頁中實現這種效果的原理很簡單。創建兩個圖層，一個為遮蓋層，覆蓋整個頁面，並且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設置圖層的z-index屬性來設置。當取消關機效果後，只需將這兩個圖層元素在頁面中刪除即可。
代碼：
<html>
<head>
<title>ajax關機效果</title>
<styletype=text/css>
#lightbox{/*該層為高亮顯示層*/
BORDER-RIGHT:#fff1pxsolid;
BORDER-TOP:#fff1pxsolid;
DISPLAY:block;
Z-INDEX:9999;/*設置該層在網頁的最上端,設置足夠大*/
BACKGROUND:#fdfce9;/*設置背景色*/
LEFT:50%;
MARGIN:-220px0px0px-250px;
BORDER-LEFT:#fff1pxsolid;
WIDTH:500px;
BORDER-BOTTOM:#fff1pxsolid;
POSITION:absolute;
TOP:50%;
HEIGHT:400px;
TEXT-ALIGN:left
}
#overlay{/*該層為覆蓋層*/
DISPLAY:block;
Z-INDEX:9998;/*設置高亮層的下方*/
FILTER:alpha(opacity=20);/*設置成透明*/
LEFT:0px;
WIDTH:100%;
POSITION:absolute;
TOP:0px;
HEIGHT:100%;
BACKGROUND-COLOR:#000;
moz-opacity:0.8;
opacity:.80
}
</style>
</head>
<body>
<ahref=http://www.baidu.comtarget=_blank>百度</a>
<!--該層為覆蓋層-->
<divid=overlay></div>
<!--該層為高亮顯示層-->
<divid=lightbox><ahref=#onclick=javascript:f()>關閉</a> <ahref=#onclick=javascript:f1()>打開</a></div>
</body>
</html>
<script>
functionf()
{
document.getElementById(overlay).style.display=none;
}
functionf1()
{
document.getElementById(overlay).style.display=block;
}
</script>
注意：在IE瀏覽器中如果有<select>標記，則該標記不能被覆蓋層覆蓋，但在其他瀏覽器中則可以覆蓋。圖22.3所示的是IE瀏覽器中<select>標記的效果，圖22.4所示的是MozzilaFirefox中<select>標記的效果。
圖22.3IE瀏覽器中<select>標記
圖22.4MozzilaFirefox瀏覽器中<select>標記
所以在使用IE瀏覽器時，要先將網頁中的<select>元素隱藏起來。如以下代碼可以用於隱藏頁面所有的<select>元素。
selects=document.getElementsByTagName('select');
for(i=0;i<selects.length;i++){
selects[i].style.visibility=visibility;
}