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

2022-09-27 12:18:11 字數 1063 閱讀 9173

步入正題:

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

還記得「position:fixed」嗎?它是css2的乙個新增的屬性,他可以讓乙個元素靜止在頁面上,拖動滾動條也不會動,如qzone頂部固定的導航欄就是這樣實現的。同樣我們也可以用乙個100%高寬的層覆蓋瀏覽器視口,這樣就可以實現全屏遮罩了。不用再計算頁面的大小,調整瀏覽器大www.cppcns.com小的時候也不要去動態修改尺寸了。

[ctrl+a 全選 注:如需引入外部js需重新整理才能執行]

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

為了省事,咱們針對ie6用萬惡expression在css中寫點指令碼,拖動滾動條的時候重新定位我們的遮罩層。傳說中expression是非常耗效能的,可是咱們的expression幾乎沒有損耗,有興趣的同學可以深入研究下expression。

[ctrl+a 全選 注:如需引入外部js需重新整理才能執行]

好了,相容ie6這個大頭娃娃後,咱們的鎖屏遮罩已經通殺主流瀏覽器了,但是呢用js寫效果的同學們總是非常的蛋疼,總想折騰點什麼來,咱們就再新增一點指令碼,讓鎖屏的時候後可以中斷使用者操作,把滾動條、滾輪、tab鍵、全選、重新整理、右鍵統統禁止掉,模擬真正的『鎖屏':

[ctrl+a 全選 注:如需引入外部js需重新整理才能執行]

本文標題: lightbox 簡易的全屏透明遮罩解決方法

本文位址:

Activity全屏透明動畫等

之前弄了很久沒有成功,不是透明不了就是不能全屏,下面大概貼以下 1建立sty樣式,屬性如下 這是啟動和關閉當前activity動畫,後面再貼出來 name android windowanimationstyle style animitem 背景顏色及透明程度 name android backg...

lightbox 模板的簡單修改

lightbox 模板的簡單修改,做點筆記,防止下次忘了。背景修改,增加logo includes templates lightinthebox common tpl header.php 首頁增加newarrival產品顯示和specials產品顯示 includes templates lig...

全屏和退出全屏功能的實現

1.判斷狀態 瀏覽器字首 const prefixname,setprefixname usestate 瀏覽器是否支援全屏 預設支援 const isfullscreendata,setisfullscreendata usestate true 是否全屏 const isfullscreen,s...