快捷導(dǎo)航

lightBox 簡易的全屏透明遮罩解決方法

更新時(shí)間：2010年06月04日 16:14:20 作者：

現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過計(jì)算頁面大小，然后覆蓋一個(gè)與頁面同等大小的層實(shí)現(xiàn)，如騰訊qzone, wordpress后臺。

步入正題：
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了，絕大多數(shù)遮罩是通過計(jì)算頁面大小，然后覆蓋一個(gè)與頁面同等大小的層實(shí)現(xiàn)，如騰訊qzone, wordpress后臺。這種方式本來無可非議，但是在頁面很長的時(shí)候在IE8下會失效（國外資料的解釋是與機(jī)器顯卡相關(guān)），有些完美情節(jié)的同學(xué)遇到這個(gè)問題后就抓破了頭，無奈之下甚至想讓IE8強(qiáng)制使用IE7的方式解析他的作品。其實(shí)我們有一個(gè)更好的方法，咱們用CSS去解決它！
還記得“position:fixed”嗎？它是css2的一個(gè)新增的屬性，他可以讓一個(gè)元素靜止在頁面上，拖動(dòng)滾動(dòng)條也不會動(dòng)，如Qzone頂部固定的導(dǎo)航欄就是這樣實(shí)現(xiàn)的。同樣我們也可以用一個(gè)100%高寬的層覆蓋瀏覽器視口，這樣就可以實(shí)現(xiàn)全屏遮罩了。不用再計(jì)算頁面的大小，調(diào)整瀏覽器大小的時(shí)候也不要去動(dòng)態(tà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" /> <title>lock page</title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } </style> </head> <body> <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> </ol> <div   class="wppm3vysvbp"   id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

可是有一個(gè)頭疼的問題，IE6不支持“position:fixed”，咱們只能通過js動(dòng)態(tài)的修改它的TOP值以模擬靜止定位，拖動(dòng)滾動(dòng)條的時(shí)候遮罩成肯定會抖動(dòng)，因?yàn)槊扛淖円淮蜪E會重新渲染一次。但是微軟卻給我們提供了一個(gè)非常有趣的特性，如果給html或者body標(biāo)簽設(shè)置一個(gè)靜止定位的背景圖片，層在拖動(dòng)滾動(dòng)條的時(shí)候就不會抖動(dòng)了，幾乎完美的模擬了“position:fixed”。我在實(shí)際項(xiàng)目中發(fā)現(xiàn)這個(gè)特性他還能觸發(fā)其他的特異功能，以后再說明。
為了省事，咱們針對IE6用萬惡expression在CSS中寫點(diǎn)腳本，拖動(dòng)滾動(dòng)條的時(shí)候重新定位我們的遮罩層。傳說中expression是非常耗性能的，可是咱們的expression幾乎沒有損耗，有興趣的同學(xué)可以深入研究下expression。

<!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" /> <title>lock page</title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay { position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } /*IE6 fixed*/ * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } </style> </head> <body> <ol id="test" onclick="document.getElementById('pageOverlay').style.visibility = 'visible'"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> </ol> <div   class="wppm3vysvbp"   id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

好了，兼容IE6這個(gè)大頭娃娃后，咱們的鎖屏遮罩已經(jīng)通殺主流瀏覽器了，但是呢用js寫效果的同學(xué)們總是非常的蛋疼，總想折騰點(diǎn)什么來，咱們就再添加一點(diǎn)腳本，讓鎖屏的時(shí)候后可以中斷用戶操作，把滾動(dòng)條、滾輪、tab鍵、全選、刷新、右鍵統(tǒng)統(tǒng)禁止掉，模擬真正的‘鎖屏'：

<!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" /> <title>lock page</title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay { visibility:hidden; position:fixed; top:0; left:0; z-index:1987; width:100%; height:100%; background:#000; filter:alpha(opacity=70); opacity:0.7; } /*IE6 fixed*/ * html { background:url(*) fixed; } * html body { margin:0; height:100%; } * html #pageOverlay { position: absolute; left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } </style>  </head> <body> <button id="btn_lock" style="position: absolute; left:50%; top:40%; ">開啟鎖屏</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> </ol> <div   class="wppm3vysvbp"   id="pageOverlay"></div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: