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

2024-08-26 00:09:34

字體：大中小

來源：轉載

供稿：網友

[參與測試的瀏覽器：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做帶有滾動條的頁面，一個疊上面，一個疊下面。

上一篇：表單元素與提示文字無法對齊的問題

下一篇：網頁文字實現豎排的幾種方法