[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[作業系統：Windows]
本教學設計實現lightBox時的樣式與行為分離，減少JS在各方面（全螢幕遮蔽、ie6中遮蔽select、雙向居中、高度自適應內容等）的工作。
先上程式碼：
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
http://www.14px.com " title="Home" />
全螢幕屏蔽、自動居中的lightBox 假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
這款lightBox具備以下特性，大家可以透過修改程式碼測一測^-^：
- 在頁面中任一位置點開，均能完美遮屏（此時無法直接控制包括捲軸在內的任意元素），IE6中無須隱藏即能遮蔽select元素（iframe遮蔽法的缺陷：遮蔽後，如果拖曳捲軸，select仍會移至頂層）。
- lightBox的高度自適應其內容，並呈現完美的居中狀態。
- 內容為單行時，居中顯示；內容為多行時，居左顯示；內容高度使lightBox超過屏高時呈現滾動條，並居頂顯示，讀者能完整閱讀。
如有興趣，構成這個lightBox的以下小技巧可供您參詳：
1. 全螢幕遮蔽的方法：
A. 隱藏html/body的捲軸。
B. 用一個div做遮罩，再用一個div做一個有捲軸的頁面，一個疊上面，一個疊下面。
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
http://www.14px.com " title="Home" />
全螢幕遮蔽的方法
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
假裝很豐富的內容
