DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
關於JavaScript
>> lightBox 簡易的全屏透明遮罩解決方法
lightBox 簡易的全屏透明遮罩解決方法
編輯：關於JavaScript
步入正題：
現在全屏的半透明遮罩層在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> <meta name="viewport" content="width=device-width, initial-scale=1.0"></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> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
可是有一個頭疼的問題，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> <meta name="viewport" content="width=device-width, initial-scale=1.0"></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> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
好了，兼容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(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></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> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
js實現的拖動後記錄軌跡並運行
下一頁:
js下為表格內部動態添加行的代碼
關於JavaScript
基於canvas實現的絢麗圓圈效果完整實例
本文實例講述了基於canvas實現的絢麗圓圈效果。分享給大家供大家參考，具體如下：運行效果截圖如下：
深入淺析JavaScript中的3DES
3DES簡介：3DES（或稱為Triple DES）是三重數據加密算法（TDEA，Triple Da
總結Javascript調用函數的方法
一次又一次的,我發現,那些有bug的Javascript代碼是由於沒有真正理解Javascript函
相關文章
css width height同時設置
font-weight:bold 設置字體加粗CSS樣式
margin-right css右外邊距 右外邊間隔
padding-right css右內邊距樣式
text-decoration:line-through CSS文字中劃線 刪除線 貫穿線樣式
解決wx.onMenuShareTimeline出現的問題
Ajax 設置Access-Control-Allow-Origin實現跨域訪問
jQuery插件HighCharts實現氣泡圖效果示例【附demo源碼】
輕松實現jQuery添加刪除按鈕Click事件
jQuery插件HighCharts實現的2D堆條狀圖效果示例【附demo源碼下載】
JavaScript基礎知識
JSON基礎
正則表達式
關於JavaScript
JavaScript技巧
jQuery入門知識
AJAX入門
JavaScript綜合知識
小編推薦
JS操作XML實例總結(加載與解析XML文件、字符串)
JavaScript中實現map功能代碼分享
js解決movebox移動問題
js關於getImageData跨域問題的解決方法
JS動態改變表格邊框寬度的方法教程
node在兩個div之間移動,用ztree實現
JS簡單實現動畫彈出層效果
簡單的JS時鐘實例講解
JavaScript獲取按鈕所在form表單id的方法
體驗js中splice()的強大(插入、刪除或替換數組的元素)
熱門推薦
Javascript獲取當前時間函數和時間操作小結
使用jsonp完美解決跨域問題
如何使用json在前後台進行數據傳輸實例介紹
JS仿iGoogle自定義首頁模塊拖拽特效的方法
Javascript教程:判斷函數類型
node.js中的http.createServer方法教程使用說明詳解
Javascript函數的參數
利用JS實現點擊按鈕後圖片自動切換的簡單方法
js中將String轉換為number以便比較
大家都在看
JQuery each()嵌套使用小結
js格式化時間小結
HTTP返回碼大全（中英解釋）
如何判斷鼠標是否在DIV的區域內
用Ajax來控制書簽和回退按鈕的代碼
網站進行W3C XHTML1.0驗證的經驗
JavaScript中fixed()方法的使用簡介
AJAX和JSP混合使用方法實例
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved