萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 簡易的全屏透明遮罩（lightBox）
簡易的全屏透明遮罩（lightBox）
前不久有個正要畢業的網友給我發郵件，他畢業設計需要實現鎖屏的效果，但是他沒有能看懂我之前發布的對話框源碼，他問能不能把鎖屏相關代碼說明下，我當時說過兩天就發。由於最近比較忙，我現在才想起來，但願現在此文還來得及。
步入正題：
現在全屏的半透明遮罩層在web2.0網站應用非常廣泛了，絕大多數遮罩是通過計算頁面大小，然後覆蓋一個與頁面同等大小的層實現，如騰訊qzone， wordpress後台。這種方式本來無可非議，但是在頁面很長的時候在IE8下會失效（國外資料的解釋是與機器顯卡相關），有些完美情節的同學遇到這個問題後就抓破了頭，無奈之下甚至想讓IE8強制使用IE7的方式解析他的作品。其實我們有一個更好的方法，咱們用CSS去解決它！
還記得“position:fixed”嗎？它是css2的一個新增的屬性，他可以讓一個元素靜止在頁面上，拖動滾動條也不會動，如Qzone頂部固定的導航欄就是這樣實現的。同樣我們也可以用一個100%高寬的層覆蓋浏覽器視口，這樣就可以實現全屏遮罩了，不用再計算頁面的大小，調整浏覽器大小的時候也不要去動態修改尺寸了。
以下為引用的內容：
<!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 id="pageOverlay" onclick="this.style.visibility = 'hidden'"></div>
</body>
</html>
可是有一個頭疼的問題，IE6不支持“position:fixed”，咱們只能通過js動態的修改它的TOP值以模擬靜止定位，拖動滾動條的時候遮罩成肯定會抖動，因為每改變一次IE會重新渲染一次。但是微軟卻給我們提供了一個非常有趣的特性，如果給html或者body標簽設置一個靜止定位的背景圖片，層在拖動滾動條的時候就不會抖動了，幾乎完美的模擬了“position:fixed”。我在實際項目中發現這個特性他還能觸發其他的特異功能，以後再說明。
為了省事，咱們針對IE6用萬惡expression在CSS中寫點腳本，拖動滾動條的時候重新定位我們的遮罩層。傳說中expression是非常耗性能的，可是咱們的expression幾乎沒有損耗，有興趣的同學可以深入研究下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>
&
- 上一頁:移動網站開發：標記語言
- 下一頁:報紙網頁設計：簡單即美
