實現lightBox時的樣式與行為分離減少JS

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

[參與測試的瀏覽器：ie6 / ie7 / ie8 / ff3.5 / op9.6 / sf4 / chrome2 ]

[操作系統：windows]

本教程旨在實現lightbox時的樣式與行為分離，減少js在各方面（全屏遮蔽、ie6中遮蔽select、雙向居中、高度自適應內容等）的工作。

先上代碼：

運行代碼框

<!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><head><meta http-equiv=content-type content=text/html; charset=utf-8 /><meta name=author content=chomo /><link rel=start href=http://www.14px.com title=home /><title>全屏屏蔽、自動居中的lightbox</title><style type=text/css>* { margin:0; padding:0; }html,body { height:100%; overflow:hidden; font:12px/1.5 simsun;}.mypage { line-height:3; overflow:auto; width:100%; height:100%;}.lightbox,.popupcover,.popupiframe,.popupcomponent { position:absolute; left:0; top:0; width:100%; height:100%;}.popupcomponent { z-index:2; display:none;}.popupiframe { display:none; _display:block; _filter:alpha(opacity=0);}.popupcover { background:#000; opacity:0.7; *filter:alpha(opacity=70);}.lightbox { text-align:center; overflow:auto;}.lightboxcontent { display:inline-block; *display:inline; zoom:1; width:300px; padding:10px; background:#fff; border:5px solid #00b4ff; vertical-align:middle;}.lightboxmaxheight { display:inline-block; vertical-align:middle; height:100%; *height:99.5%; width:1px; overflow:hidden; margin-left:-1px;}.lightboxwrapper { display:inline-block; *display:inline; zoom:1; text-align:left;}.lightboxclose { color:#f00;}.lightboxsubmit { margin-top:10px; padding-top:5px; border-top:1px solid #ccc;}.lightboxsubmit input { font-size:12px; padding:0 10px; overflow:visible; margin:0 5px;}</style></head><body><div class=popupcomponent id=lightbox><iframe class=popupiframe></iframe><div class=popupcover></div><div class=lightbox><span class=lightboxmaxheight></span><div class=lightboxcontent><div class=lightboxwrapper>當提示小於一行時文字居中<br /></div><div class=lightboxsubmit><input type=button value=確定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=lightbox><div class=lightboxcontent><div class=lightboxwrapper>當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br />當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度當內容已經超過了一屏的高度<br /></div><div class=lightboxsubmit><input type=button value=確定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中是否能覆蓋住的select</option></select><br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br /><select><option>又一個用於測試ie6中是否能覆蓋住的select</option></select><br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br /><div style=text-align:center;><input type=button value=位於第二屏中的按鈕onclick=showlayer('lightbox') /><input type=button value=當內容已經超過了一屏的高度onclick=showlayer('lightbox2') /></div>假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br />假裝很豐富的內容<br /></div><script>function showlayer(id) {document.getelementbyid(id).style.display = block;}function hidelayer(id) {document.getelementbyid(id).style.display = none;}</script></body></html>

[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]

這個lightbox具備以下特性，大家可以通過修改代碼測一測^-^：

在頁面中任意一位置點開，均能完美遮屏（此時無法直接控制包括滾動條在內的任意元素），ie6中無須隱藏即能遮蔽select元素（iframe遮蔽法的缺陷：遮蔽後，如果拖動滾動條，select仍會移至頂層）。
lightbox的高度自適應其內容，並呈現完美的居中狀態。
內容為單行時，居中顯示；內容為多行時，居左顯示；內容高度使lightbox超過屏高時呈現滾動條，並居頂顯示，讀者能完整閱讀。

如有興趣，構成這個lightbox的以下小技巧可供您參詳：

1. 全屏遮蔽的方法：

a. 隱藏html/body的滾動條。

b. 用一個div做遮罩，再用一個div做帶有滾動條的頁面，一個疊上面，一個疊下面。

運行代碼框

[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運行]