基本原理分析
Windows關機效果分析
使用Windows系統的用戶在關機的時候，出現的界面只允許用戶選擇關機、注銷或取消動作，而桌面上的程序都不能使用，並且屏幕呈現灰色狀態。
本例將仿照這種高亮顯示的效果在網頁上實現.
在網頁上運用這種關機效果有什麼好處呢？首先，由於單擊某一鏈接後，將用戶此時不可用的操作隱藏在後台，將可用的操作放在屏幕最上層，並高亮顯示，可以避免用戶的誤操作。其次，將信息高亮顯示，也可以提醒用戶應該注意的事項。
網頁中實現關機效果分析
在網頁中實現這種效果的原理很簡單。創建兩個圖層，一個為遮蓋層，覆蓋整個頁面，並且顯示為灰色；另一個圖層作為高亮顯示的部分，在遮蓋層的上方，這可通過設置圖層的z-index屬性來設置。當取消關機效果後，只需將這兩個圖層元素在頁面中刪除即可。
以下代碼實現顯示關機效果。
<html>
<head>
<title>Ajax LightBox Sample</title>
<style type="text/CSS">
#lightbox {/*該層為高亮顯示層*/
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
Z-INDEX: 9999; /*設置該層在網頁的最上端,設置足夠大*/
BACKGROUND: #fdfce9; /*設置背景色*/
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
POSITION: absolute;
TOP: 50%;
HEIGHT: 400px;
TEXT-ALIGN: left
}
#overlay {/*該層為覆蓋層*/
DISPLAY: block;
Z-INDEX: 9998; /*設置高亮層的下方*/
FILTER: alpha(opacity=80); /*設置成透明*/
LEFT: 0px;
WIDTH: 100%;
POSITION: absolute;
TOP: 0px;
HEIGHT: 100%;
BACKGROUND-COLOR: #000;
moz-opacity: 0.8;
opacity: .80
}
</style>
</head>
<body>
<!--該層為覆蓋層 -->
<div id="overlay"></div>
<!--該層為高亮顯示層 -->
<div id="lightbox"></div>
</body>
</html>
需要注意的是，在IE浏覽器中如果有<select>標記，則該標記不能被覆蓋層覆蓋，但在其他浏覽器中則可以覆蓋。
在使用IE浏覽器時，要先將網頁中的<select>元素隱藏起來。如以下代碼可以用於隱藏頁面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
代碼實現
客戶端代碼
客戶端的頁面上有兩個鏈接，用戶單擊鏈接後，向服務器端發送請求，並將返回信息顯示到高亮層上。客戶端的網頁文件代碼如下所示：
<html>
<head>
<title>AJAX LightBox</title>
<!-- 本例使用的css樣式表文件-->
<LINK href="lightbox.css" type=text/css rel=stylesheet>
<!--prototype類文件-->
<script type="text/javascript" src="js/prototype