lightBox 簡(jiǎn)易的全屏透明遮罩解決方法
現(xiàn)在全屏的半透明遮罩層在web2.0網(wǎng)站應(yīng)用非常廣泛了,絕大多數(shù)遮罩是通過(guò)計(jì)算頁(yè)面大小,然后覆蓋一個(gè)與頁(yè)面同等大小的層實(shí)現(xiàn),如騰訊qzone, wordpress后臺(tái)。這種方式本來(lái)無(wú)可非議,但是在頁(yè)面很長(zhǎng)的時(shí)候在IE8下會(huì)失效(國(guó)外資料的解釋是與機(jī)器顯卡相關(guān)),有些完美情節(jié)的同學(xué)遇到這個(gè)問(wèn)題后就抓破了頭,無(wú)奈之下甚至想讓IE8強(qiáng)制使用IE7的方式解析他的作品。其實(shí)我們有一個(gè)更好的方法,咱們用CSS去解決它!
還記得“position:fixed”嗎?它是css2的一個(gè)新增的屬性,他可以讓一個(gè)元素靜止在頁(yè)面上,拖動(dòng)滾動(dòng)條也不會(huì)動(dòng),如Qzone頂部固定的導(dǎo)航欄就是這樣實(shí)現(xiàn)的。同樣我們也可以用一個(gè)100%高寬的層覆蓋瀏覽器視口,這樣就可以實(shí)現(xiàn)全屏遮罩了。不用再計(jì)算頁(yè)面的大小,調(diào)整瀏覽器大小的時(shí)候也不要去動(dòng)態(tài)修改尺寸了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
可是有一個(gè)頭疼的問(wèn)題,IE6不支持“position:fixed”,咱們只能通過(guò)js動(dòng)態(tài)的修改它的TOP值以模擬靜止定位,拖動(dòng)滾動(dòng)條的時(shí)候遮罩成肯定會(huì)抖動(dòng),因?yàn)槊扛淖円淮蜪E會(huì)重新渲染一次。但是微軟卻給我們提供了一個(gè)非常有趣的特性,如果給html或者body標(biāo)簽設(shè)置一個(gè)靜止定位的背景圖片,層在拖動(dòng)滾動(dòng)條的時(shí)候就不會(huì)抖動(dòng)了,幾乎完美的模擬了“position:fixed”。我在實(shí)際項(xiàng)目中發(fā)現(xiàn)這個(gè)特性他還能觸發(fā)其他的特異功能,以后再說(shuō)明。
為了省事,咱們針對(duì)IE6用萬(wàn)惡expression在CSS中寫(xiě)點(diǎn)腳本,拖動(dòng)滾動(dòng)條的時(shí)候重新定位我們的遮罩層。傳說(shuō)中expression是非常耗性能的,可是咱們的expression幾乎沒(méi)有損耗,有興趣的同學(xué)可以深入研究下expression。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
好了,兼容IE6這個(gè)大頭娃娃后,咱們的鎖屏遮罩已經(jīng)通殺主流瀏覽器了,但是呢用js寫(xiě)效果的同學(xué)們總是非常的蛋疼,總想折騰點(diǎn)什么來(lái),咱們就再添加一點(diǎn)腳本,讓鎖屏的時(shí)候后可以中斷用戶(hù)操作,把滾動(dòng)條、滾輪、tab鍵、全選、刷新、右鍵統(tǒng)統(tǒng)禁止掉,模擬真正的‘鎖屏':
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
利用JavaScript在網(wǎng)頁(yè)實(shí)現(xiàn)八數(shù)碼啟發(fā)式A*算法動(dòng)畫(huà)效果
這篇文章主要介紹了利用JavaScript在網(wǎng)頁(yè)實(shí)現(xiàn)八數(shù)碼啟發(fā)式A*算法動(dòng)畫(huà)效果,需要的朋友可以參考下2017-04-04electron實(shí)現(xiàn)qq快捷登錄的方法示例
這篇文章主要介紹了electron實(shí)現(xiàn)qq快捷登錄的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10js 數(shù)值轉(zhuǎn)換為3位逗號(hào)分隔的示例代碼
本篇文章主要是對(duì)js將數(shù)值轉(zhuǎn)換為3位逗號(hào)分隔的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存實(shí)例詳解
這篇文章主要介紹了uni-app網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)緩存的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11JS?限時(shí)限次數(shù)點(diǎn)擊按鈕的實(shí)現(xiàn)思路
這篇文章主要介紹了JS?限時(shí)限次數(shù)點(diǎn)擊按鈕,實(shí)現(xiàn)方法很簡(jiǎn)單需要用一個(gè)變量作為計(jì)數(shù),點(diǎn)擊一次,計(jì)數(shù)加一點(diǎn)擊函數(shù)內(nèi)判斷計(jì)數(shù)變量設(shè)置定時(shí)恢復(fù),對(duì)實(shí)例代碼感興趣的朋友一起看看吧2022-03-03js彈性勢(shì)能動(dòng)畫(huà)之拋物線(xiàn)運(yùn)動(dòng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了js彈性勢(shì)能動(dòng)畫(huà)之拋物線(xiàn)運(yùn)動(dòng)的制作方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載
這篇文章主要介紹了使用javascript實(shí)現(xiàn)json數(shù)據(jù)以csv格式下載,需要的朋友可以參考下2015-01-01