効果：Windowsシステムを使用しているユーザーがシャットダウンすると、表示されるインターフェイスのみがユーザーのみを選択したり、アクションをログアウトするか、キャンセルしたりしますが、デスクトップ上のプログラムは使用できず、画面がグレーアウトされます。 Windowsシャットダウン効果を図22.1に示します。
この効果をWebページに使用することの利点：このシャットダウン効果をWebページに使用することの利点は何ですか？まず、リンクをクリックした後、この時点でユーザーが利用できないアクションがバックグラウンドに隠され、利用可能なアクションが画面の上部に配置され、ユーザーの誤操作を回避できます。第二に、情報を強調表示することで、ユーザーに注意が払われるべきものを思い出させることもできます。
原則：Webページでこの効果を達成するという原則は非常に簡単です。ページ全体を覆い、灰色で表示する2つのレイヤーをシェーディングレイヤーとして作成します。他のレイヤーは、シェーディングレイヤーの上の強調表示された部分として機能します。これは、レイヤーのZ-Indexプロパティを設定することで設定できます。シャットダウン効果がキャンセルされたら、ページ内のこれら2つのレイヤー要素を削除するだけです。
コード：
<html>
<head>
<title> ajaxシャットダウン効果</title>
<styletype = text/css>
#lightbox {/*このレイヤーはハイライトレイヤーです*/
境界線右：＃ffff1pxsolid;
border-top：＃ffff1pxsolid;
表示：ブロック;
z-index：9999;/*このレイヤーをWebページの上部に設定し、十分に大きく設定します*/
背景：＃fdfce9;/*背景色を設定*/
左：50％;
マージン：-220px0px0px-250px;
国境左：＃ffff1pxsolid;
幅：500px;
境界線：＃ffff1pxsolid;
位置：絶対;
トップ：50％;
高さ：400px;
テキストアライグ：左
}
#Overlay {/*このレイヤーはカバーレイヤーです*/
表示：ブロック;
z-index：9998;/*ハイライトレイヤーの下部を設定*/
フィルター：アルファ（不透明= 20）;/*透明に設定*/
左：0px;
幅：100％;
位置：絶対;
上：0px;
高さ：100％;
バックグラウンドカラー：＃000;
Moz-opacity：0.8;
不透明：.80
}
</style>
</head>
<body>
<ahref = http：//www.baidu.comtarget =_blank> baidu </a>
<！ - このレイヤーはカバーレイヤーです - >
<divid = overlay> </div>
<！ - このレイヤーはハイライトレイヤーです - >
<divid = lightbox> <ahref =＃onclick = javascript：f（）> close </a>＆nbsp; <ahref =＃onclick = javascript：f1（）> open </a> </div>
</body>
</html>
<スクリプト>
functionf（）
{
document.getElementById（overlay）.style.display = none;
}
functionf1（）
{
document.getElementById（overlay）.style.display = block;
}
</script>
注：IEブラウザに<elect>タグがある場合、タグは上書きレイヤーで上書きすることはできませんが、他のブラウザで上書きすることはできません。図22.3は、IEブラウザーの<select>タグの効果を示し、図22.4はmozzilafirefoxの<select>タグの効果を示しています。
図22.3 <select> IEブラウザのタグ
図22.4 mozzilafirefoxブラウザーの<select>タグ
したがって、IEブラウザを使用する場合、最初にWebページの<select>要素を非表示にする必要があります。たとえば、次のコードを使用して、ページのすべての<elect>要素を非表示にできます。
selects = document.getElementsByTagname（ 'Select'）;
for（i = 0; i <selects.length; i ++）{
[i] .style.visibility = visibilityを選択します。
}