Lightboxを実装するときのスタイルと動作の分離はJSを減らします

著者：Eve Cole 更新時間：2025-05-23 13:00:04

[テストに参加するブラウザ：IE6/IE7/IE8/FF3.5/OP9.6/SF4/CHROME2]

[オペレーティングシステム：Windows]

このチュートリアルは、ライトボックスでスタイルと動作を分離し、あらゆる面でJSの作業を減らすことを目的としています（フルスクリーンオクルージョン、IE6オクルージョン選択、双方向センター、高度に適応的なコンテンツなど）。

最初にコードをアップロードします。

コードボックスを実行します

<！doctype html public - // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <hhtml xmlns = http：//www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <meta name =著者コンテンツ= chomo/> <link rel = start href = http：//www.14px.com title = home/> <title>フルスクリーンブロッキング、自動中心のライトボックス</title> <style type = text/css>* {magrim：0;パディング：0; } html、body {height：100％;オーバーフロー：隠し;フォント：12px/1.5 simsun;}。mypage {line-height：3;オーバーフロー：自動;幅：100％;高さ：100％;}。lightbox、.popupcover、.popuppiframe、.popupcomponent {position：absolute;左：0;上：0;幅：100％;高さ：100％;}。popupComponent {z-index：2;ディスプレイ：なし;}。popupiframe {display：none; _display：block; _filter：alpha（Opacity = 0）;}。popupCover {background：＃000;不透明度：0.7; *フィルター：Alpha（Opacity = 70）;}。lightbox {text-align：center;オーバーフロー：auto;}。lightboxContent {display：inline-block; *表示：インライン;ズーム：1;幅：300px;パディング：10px;背景：#fff;国境：5pxソリッド＃00B4FF; Vertical-align：Middle;}。lightboxmaxheight {display：inline-block;垂直アライイン：中央;高さ：100％; *高さ：99.5％;幅：1px;オーバーフロー：隠し;マージン左：-1px;}。lightboxwrapper {display：inline-block; *表示：インライン;ズーム：1;テキストアライグ：左;}。lightboxclose {color：＃f00;}。lightboxSubmit {marve-top：10px;パディングトップ：5px;ボーダートップ：1px solid #ccc;}。lightboxsubmit input {font-size：12px;パディング：0 10px;オーバーフロー：可視;マージン：0 5px;} </style> </head> <body> <div class = popupcomponent id = lightbox> <iframe class = iframe compontenid id = lightbox> <iframe class = popupcover> </div> <div class = lightbox> <span class = lightboxmaxheight> </span = div div spent> lightbox> <テキストは中央にあります class=popupcover></div><div class=lightbox><div class=lightboxcontent><div class=lightboxwrapper>When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one画面。 />コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合、コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに1つの画面の高さを超えたとき。 <br />コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br /> />コンテンツが1つの画面の高さを超えた場合、コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えた場合。コンテンツが1つの画面の高さを超えたとき。 <br />コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合、コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに1つの画面の高さを超えたとき。 <br />コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br /> />コンテンツが1つの画面の高さを超えると、コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツがコンテンツが1つの画面を超えたときにコンテンツが1つの画面を超えたときにコンテンツが1つの画面を超えたときにコンテンツが1つの画面を超えたときにコンテンツが1つの画面を超えたときに1つの画面を超えたときにコンテンツが1つの画面を超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えているときにコンテンツが1つの画面の高さを超えた場合、コンテンツが1つの画面の高さを超えた場合、コンテンツは1つの画面の高さを超えています。 <br />コンテンツがコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えたときに、コンテンツが1つの画面の高さを超えた場合。 <br />コンテンツが1つの画面の高さを超えたときにコンテンツが1つの画面の高さを超えた場合。 <br/> </div> <div class = lightboxsubmit> <入力タイプ=ボタン値= button onclick = hidelayer（ 'lightbox2'）/> <入力タイプ=ボタン値= cancel onclayer = hidelayer（ 'lightbox2'）/> </div> </div> <span class = lightboxmaxheight> span </div> div> div> div> div> div> div> div> div> div> div> div> divコンテンツ<br />リッチコンテンツのふり<br />リッチコンテンツのふり<br />リッチコンテンツのふり<br /> <div style = center：center;> <input-align = button button button button button button button onclick = showlayer（ 'lightbox'） /> div> preatendingリッチコンテンツ<br />リッチコンテンツ<br /> prethending refintenting <br /> />豊かなコンテンツのふり<br /> rich lice content <br /> rich content <br /> rich content <br /> rich content <br /> rich content <br /> <div style = text-align：center;> <input type =ボタン値=ボタンボタンonclick = showlayer（ 'lightbox'） /> />豊富なコンテンツのふり<br /> rich lich content <br /> rich content <br /> rich content <br /> rich content <br /> rich content <br /> rich content <br /> /> <select> <option>を選択するための選択IE6がそれをカバーできるかどうかをテストするための選択< /option>コンテンツ<br />コンテンツが豊富にあるふり<br />コンテンツが豊富である<br />コンテンツが豊富であるふりをしている<br />コンテンツが豊富であるふりをしている<br />コンテンツが豊富であるふりをしている<br />コンテンツが豊富であるふりをして<BR />コンテンツ<BR />コンテンツ<BR /> lich <br />のふりをしているふりをしているふりをしている<BR /> />> <select> <option> IE6がそれをカバーできるかどうかをテストするための別の選択< /option> < /select> <br />コンテンツが豊富にあるふりをしている<br /> <br /> <div style = text-align：center;> <input =ボタン値=ボタンonclick = showlayer（ 'lightbox'） onclick = showlayer（ 'lightbox2'） /> < /div>コンテンツが豊富にあるふり<br />コンテンツが豊富にあるふりをする<br />コンテンツが豊富になるふり<br />コンテンツが豊富であるふり<br /> />コンテンツが豊富になるふりコンテンツ<br />コンテンツが豊富であるふり<br />コンテンツに富むふり<br />コンテンツが豊富にあるふり<br />コンテンツが豊富にあるふり<br />コンテンツ<br />のふり<br />コンテンツが豊富である<br />コンテンツの豊富な<br /> licen <br />> pretend fistend fistend fistend fistend fistend fistend fistend fistend frish fistend frish in content <br />コンテンツに富んでいる<br />コンテンツに富むふり<br />コンテンツが豊富にあるふり<br />コンテンツが豊富にあるふり<br />コンテンツが豊富にあるふり<br /> rich />> < /div> <スクリプト> function showlayer（id）{document.getelementyid（id）.style.display（id）。 hidelayer（id）{document.getElementbyId（id）.style.display = none;} </script> </body> </html>

[ctrl+aすべての選択のヒント：最初にコードを変更してから実行することができます]

このライトボックスには次の機能があります。コードを変更してテストできます ^ - ^：

ページ内の任意の位置をクリックすると、画面を完全にカバーできます（現時点では、スクロールバーを含む要素を直接制御できません）。 IE6に隠さずに選択要素をブロックできます（IFRAMEオクルージョン法の欠陥：ブロック後、スクロールバーがドラッグされた場合、選択は引き続き最上位レベルに移動します）。
ライトボックスはそのコンテンツに非常に適応可能であり、完璧なセンタリング状態を提供します。
コンテンツが単一の行の場合、中央に表示されます。コンテンツがマルチラインの場合、左に表示されます。コンテンツの高さがライトボックスを画面の高さを超えると、スクロールバーが表示され、上部に表示されるため、読者は完全な写真を読むことができます。

興味がある場合は、このライトボックスを形成するための次のヒントを参照してください。

1。フルスクリーンシェーディングの方法：

a。 html/bodyのスクロールバーを非表示にします。

b。 divをマスクとして使用し、スクロールバーを備えたページとしてdivを使用し、上部に積み重ねられ、下部に積み重ねられます。

コードボックスを実行します

[ctrl+aすべての選択のヒント：最初にコードを変更してから実行することができます]