【テスト参加ブラウザ：IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2】
【OS：Windows】
このチュートリアルは、lightBox のスタイルと動作を分離し、さまざまな側面 (全画面マスキング、IE6 でのマスキング選択、双方向センタリング、高さ適応コンテンツなど) での JS 作業を軽減することを目的としています。
まずコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="著者" content="ちょも" />
<link rel="start" href=" http://www.14px.com " title="ホーム" />
<title>全画面シールド、自動センタリング ライトボックス</title>
<style type="text/css">
* {マージン:0;
html,body {高さ:100%; フォント:12px/1.5 simsun;}
.myPage {行の高さ:3; 幅:100%;}
.ライトボックス、
.popupCover、
.popupIframe、
.popupComponent { 位置: 左: 0; 幅: 100%; }
.popupComponent { z-index:2; }
.popupIframe { ディスプレイ: なし: _フィルター: アルファ (不透明度 = 0);}
.popupCover {背景:#000; *フィルター:アルファ(不透明度=70);}
.lightBox {テキスト整列:中央;}
.lightBoxContent { 表示: インライン; 幅: 300 ピクセル; 背景: 5 ピクセル 垂直整列: 中央
.lightBoxMaxHeight { 表示: インラインブロック; 高さ: 100%; 幅: 1px; }
.lightBoxWrapper {ディスプレイ:インラインブロック; *テキスト整列:左;}
.lightBoxClose { color:#f00;}
.lightBoxSubmit { マージントップ:10px ボーダートップ:1px ソリッド #ccc;}
.lightBoxSubmit 入力 { フォントサイズ:12px; オーバーフロー:可視:0 5px;}
</スタイル>
</head>
<本文>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="ライトボックス">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
プロンプトが 1 行より小さい場合、テキストは中央に配置されます<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="キャンセル" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="ライトボックス">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合コンテンツが 1 画面の高さを超えた場合<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="キャンセル" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="myPage">
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
<div style="text-align:center;"><input type="button" value="最初の画面のボタン" onclick="showLayer('lightBox')" /></div>
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
<select><option>IE6 でカバーできるかどうかをテストするために使用される選択</option></select><br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
<select><option>IE6 でカバーできるかどうかをテストするための別の選択</option></select><br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
<div style="text-align:center;"><input type="button" value="2 番目の画面にあるボタン" onclick="showLayer('lightBox')" /><input type="button" value ="コンテンツが1画面の高さを超えた場合" onclick="showLayer('lightBox2')" /></div>
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
</div>
<スクリプト>
関数 showLayer(id) {
document.getElementById(id).style.display = "ブロック";
}
関数 HideLayer(id) {
document.getElementById(id).style.display = "なし";
}
</script>
</body>
</html>
このライトボックスには次の特性があります。コードを変更することでテストできます ^-^:
ご興味がございましたら、このライトボックスを構成する次のヒントを参照してください。
1. 全画面マスキング方法:
A. html/bodyのスクロールバーを非表示にします。
B. div をマスクとして使用し、別の div を使用してスクロール バーを上部と下部に 1 つずつ配置したページを作成します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<頭>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="著者" content="ちょも" />
<link rel="start" href=" http://www.14px.com " title="ホーム" />
<title>全画面マスクの方法</title>
<style type="text/css">
* {
margin:0;padding:0; /*--- 単純な CSS リセットは効率的ではないと言われています。効率的なものに置き換えてください---*/
}
html,ボディ{
height:100%; /*--- この高さでは、IE6 ではボディのサブオブジェクトに height:100% を設定するのが効果的です ---*/
overflow:hidden; /*--- HTML または body によって生成されたスクロール バーを強制終了します---*/
}
.ページ {
行の高さ:3;
overflow:auto; /*--- スクロール バーはそれに依存します ---*/
width:600px; height:400px; /*--- みんながはっきり見えるように、とりあえずこれくらい大きくしましょう ---*/
Position:relative; left:50px; top:50px; /*--- 全員がはっきり見えるように少し移動し、マスクを削除すると、マスクの基本的な効果が得られます。
}
。カバー {
位置:絶対;
幅:600ピクセル; 高さ:400ピクセル;
不透明度:0.7; *フィルター:アルファ(不透明度=70);
z インデックス:2;
}
</スタイル>
</head>
<本文>
<div class="cover"></div>
<div class="ページ">
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />コンテンツが豊富なふりをする<br />
</div>
</body>
</html>