簡易的全螢幕透明遮罩(lightBox)

作者：Eve Cole 更新時間：2010-06-09 17:08:28

前不久有個正要畢業的網友給我發郵件，他畢業設計需要實現鎖定屏幕的效果，但是他沒有能看懂我之前發布的對話框源碼，他問能不能把鎖屏相關代碼說明下，我當時說過兩天就發。由於最近比較忙，我現在才想起來，但願現在此文還來得及。

步入正題：

現在全螢幕的半透明遮罩層在web2.0網站應用非常廣泛了，絕大多數遮罩是透過計算頁面大小，然後覆蓋一個與頁面同等大小的層實現，如騰訊qzone, wordpress後台。這種方式本來無可非議，但是在頁面很長的時候在IE8下會失效（國外資料的解釋是與機器顯卡相關），有些完美情節的同學遇到這個問題後就抓破了頭，無奈之下甚至想讓IE8強制使用IE7的方式解析他的作品。其實我們有一個更好的方法，咱們用CSS去解決它！

還記得「 position:fixed 」嗎？它是css2的一個新增的屬性，他可以讓一個元素靜止在頁面上，拖曳捲軸也不會動，如Qzone頂部固定的導覽列就是這樣實現的。同樣我們也可以用一個100%高寬的層覆蓋瀏覽器視口，這樣就可以實現全螢幕遮罩了，不用再計算頁面的大小，調整瀏覽器大小的時候也不要去動態修改尺寸了。

但有一個頭痛的問題，IE6不支援“position:fixed”，咱們只能透過js動態的修改它的TOP值以模擬靜止定位，拖動滾動條的時候遮罩成肯定會抖動，因為每改變一次IE會重新渲染一次。但微軟卻為我們提供了一個非常有趣的特性，如果給html或body標籤設定一個靜止定位的背景圖片，層在拖曳滾動條的時候就不會抖動了，幾乎完美的模擬了「position:fixed 」。我在實際專案中發現這個特性他還能觸發其他的特異功能，以後再說明。

為了省事，咱們針對IE6用萬惡expression在CSS中寫點腳本，拖曳捲軸的時候重新定位我們的遮罩層。傳說中expression是非常耗性能的，可是咱們的expression幾乎沒有損耗，有興趣的同學可以深入研究下expression。

好了，相容IE6這個大頭娃娃後，咱們的鎖定畫面遮罩已經通殺主流瀏覽器了，但是呢用js寫效果的同學們總是非常的蛋疼，總想折騰點什麼來，咱們就再加入一點腳本，讓鎖定畫面的時候後可以中斷使用者操作，把捲軸、滾輪、tab鍵、全選、刷新、右鍵統統禁止掉，模擬真正的'鎖定畫面'：

運行程式碼框
<!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(documentElementsroll.ofumentElementsc. ); } </style> <script> (function(){ // 取得物件var $ = function (id){ return document.getElementById(id); }; // 遍歷var each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i); }; // 事件綁定var bind = function (obj, type, fn) { if ( obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]); } else { obj.addEventListener(type, fn, false); }; }; // 移除事件var unbind = function (obj, type, fn) { if (obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn]); obj[type + fn] = null; } catch(_) {}; } else { obj.removeEventListener( type, fn, false); }; }; // 阻止瀏覽器預設行為var stopDefault = function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false; }; // 取得頁面捲軸位置var getPage = function(){ var dd = document.documentElement, db = document.body; return { left: Math.max(dd.scrollLeft, db.scrollLeft), top: Math.max(dd.scrollTop, db. scrollTop) }; }; // 鎖定螢幕var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; var p = getPage(), left = p.left, top = p.top; // 頁面滑鼠操作限制this.mouse = function(evt){ var e = evt || window.event; stopDefault(e); scroll(left, top); }; each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse); }); // 屏蔽特定按鍵: F5, Ctrl + R, Ctrl + A, Tab, Up, Down this.key = function(evt){ var e = evt || window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) { try{ e.keyCode = 0; }catch(_ ){}; stopDefault(e); }; }; bind(document, 'keydown', lock.key); }, close: function(){ $('pageOverlay').style.visibility = 'hidden'; each (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock. key); } }; bind(window, 'load', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close(); }; }); })(); </script> </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 id="pageOverlay"></div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分程式碼，再按執行]

原文： http://www.planeart.cn/?p=792