天天精品视频免费观看,大香伊蕉在人线国产观看,日韩免费在线中文字幕

　全屏屏蔽且自動居中的lightBox

作者：14px　時間： 2009-07-27　文檔類型：原創(chuàng)　來自：藍色理想

第 1 頁全屏屏蔽且自動居中的lightBox [1]
第 2 頁全屏屏蔽且自動居中的lightBox [2]

[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3.5 / OP9.6 / SF4 / Chrome2 ]
[操作系統(tǒng)：Windows]

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

先上代碼：

運行代碼框
<!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" 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"> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<br /> 當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度當內(nèi)容已經(jīng)超過了一屏的高度<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"> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> <div style="text-align:center;"><input type="button" value="位于第一屏的按鈕" onclick="showLayer('lightBox')" /></div> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> <select><option>一個用于測試IE6中是否能覆蓋住的select</option></select><br /> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> <select><option>又一個用于測試IE6中是否能覆蓋住的select</option></select><br /> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> <div style="text-align:center;"><input type="button" value="位于第二屏中的按鈕" onclick="showLayer('lightBox')" /><input type="button" value="當內(nèi)容已經(jīng)超過了一屏的高度" onclick="showLayer('lightBox2')" /></div> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br /> 假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<br />假裝很豐富的內(nèi)容<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具備以下特性，大家可以通過修改代碼測一測 ^-^：

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

如有興趣，構(gòu)成這個lightBox的以下小技巧可供您參詳：

1. 全屏遮蔽的方法：

A. 隱藏html/body的滾動條。
B. 用一個div做遮罩，再用一個div做帶有滾動條的頁面，一個疊上面，一個疊下面。

出處：藍色理想
責任編輯：bluehearts

上一頁下一頁全屏屏蔽且自動居中的lightBox [2]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

Lightbox JS v2.0

新穎實用的顯示圖片效果

作者文章

更多作者文章

全兼容的純CSS級聯(lián)菜單要點淺析

ie6下實現(xiàn)position-fixed效果

表格外觀的無序列表

div仿框架方法詳解

層疊加的五條疊加法則


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx