LightBox のようなページのポップアップウィンドウは、ブラウジング中に非常に一般的です。実装もそれほど困難ではありません。CG は今日、前回の ETP プロジェクトのソースコードから JS 部分を抽出しました。これにより、学習と使用が容易になります。 実装原理：DIV のフロートとレイヤーの重なりを利用して、ダイアログの Z-index を最上位に設定するだけです。また、マスクレイヤーに関しては、ダイアログレイヤーの下に配置し、他のページ要素の上に配置するだけです。見た目を美しくする場合は、半透明効果を設定できます。
以下は CSS コードです：
/* メッセージボックス */
#messageBox{
position;
border:2px solid #3B5A6E;
background-color:#FFFFCC;
display;
z-index:9999; /* ダイアログを前面に表示 */
margin:0;
padding:0;
}
/* メッセージボックスのタイトル */
#messageBox h2{
font-size:12px;
/* 画像形式 */
background(top.gif);
border-bottom:1px solid #3B5A6E;
margin:0;
color:#FFFFFF;
padding:6px 10px 4px 10px;
}
/* マスクレイヤー */
#messageBoxMask{
position;
top:0; /* (0,0) から開始 */
left:0;
background-color:#CCCCCC;
/* 以下は透明効果を制御、IE、FF*/
filter(opacity=50); /*IE*/
-moz-opacity:0.5; /* 古いバージョンの FF に対応 */
opacity:0.5; /* Mozila に対応 */
z-index:9998; /* マスクを前面に表示 */
display;
margin:0;
padding:0;
}
テストソースコードのダウンロードリンク： http://www.lidaren.com/code/MsgBox.zip