javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)第1/3頁(yè)
更新時(shí)間：2007年08月19日 12:12:45 作者：
在ajax大行其道的今天，模擬彈出窗口，或者thinkbox，greybox等很多特效都用了蒙板的功能，其應(yīng)用原來(lái)對(duì)于我們來(lái)說(shuō)也很簡(jiǎn)單：創(chuàng)建一個(gè)絕對(duì)定位，top/left都為0，寬度和高度等于瀏覽器內(nèi)容的高寬，然后索引設(shè)置的大點(diǎn)即可?？墒沁@里有一些問(wèn)題和技巧可能是您一直都不知道或者不清楚的，這里總結(jié)幾點(diǎn)，這些都是個(gè)人學(xué)習(xí)的過(guò)程中發(fā)現(xiàn)的。
1、創(chuàng)建的蒙板如果要禁止對(duì)蒙板下部?jī)?nèi)容的操作必須設(shè)置background屬性且必須設(shè)置一個(gè)有效的值，否則雖然遮罩層創(chuàng)建成功，但仍然可以對(duì)頁(yè)面下部的元素進(jìn)行操作。
2、如果要顯示頁(yè)面底部的元素可以通過(guò)css設(shè)置透明度來(lái)實(shí)現(xiàn)，如filter:alpha(opacity=0)，這里是完全透明，淡然也可以設(shè)置為半透明。
3、div層形成的蒙板可以蒙住iframe，但不能蓋住select及object。
4、可以使用iframe可以遮蓋select，一般使用iframe和div結(jié)合的辦法遮蓋select（div所以要比iframe的z索引高）并創(chuàng)建內(nèi)容，其實(shí)iframe會(huì)自動(dòng)隱藏select，也可以自己只使用div和js隱藏select。
5、對(duì)于使用js隱藏select的方法多數(shù)是在創(chuàng)建真正的蒙板時(shí)使用，如彈出框或thinkbox等。對(duì)于使用iframe和div的辦法主要用于局部蒙板，如日期控件或title彈出時(shí)使用iframe和div定位在同一位置可以遮蓋住其下的select控件。
以下為上面一些總結(jié)的演示：
(1)不設(shè)置background屬性的div蒙板。{蒙板出現(xiàn)后背后元素依然可以操作}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
1、創(chuàng)建的蒙板如果要禁止對(duì)蒙板下部?jī)?nèi)容的操作必須設(shè)置background屬性且必須設(shè)置一個(gè)有效的值，否則雖然遮罩層創(chuàng)建成功，但仍然可以對(duì)頁(yè)面下部的元素進(jìn)行操作。
2、如果要顯示頁(yè)面底部的元素可以通過(guò)css設(shè)置透明度來(lái)實(shí)現(xiàn)，如filter:alpha(opacity=0)，這里是完全透明，淡然也可以設(shè)置為半透明。
3、div層形成的蒙板可以蒙住iframe，但不能蓋住select及object。
4、可以使用iframe可以遮蓋select，一般使用iframe和div結(jié)合的辦法遮蓋select（div所以要比iframe的z索引高）并創(chuàng)建內(nèi)容，其實(shí)iframe會(huì)自動(dòng)隱藏select，也可以自己只使用div和js隱藏select。
5、對(duì)于使用js隱藏select的方法多數(shù)是在創(chuàng)建真正的蒙板時(shí)使用，如彈出框或thinkbox等。對(duì)于使用iframe和div的辦法主要用于局部蒙板，如日期控件或title彈出時(shí)使用iframe和div定位在同一位置可以遮蓋住其下的select控件。
以下為上面一些總結(jié)的演示：
(1)不設(shè)置background屬性的div蒙板。{蒙板出現(xiàn)后背后元素依然可以操作}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- js事件(Event)知識(shí)整理
- javascript Excel操作知識(shí)點(diǎn)
- javascript之正則表達(dá)式基礎(chǔ)知識(shí)小結(jié)
- JavaScript 語(yǔ)言基礎(chǔ)知識(shí)點(diǎn)總結(jié)（思維導(dǎo)圖）
- extjs 學(xué)習(xí)筆記（一） 一些基礎(chǔ)知識(shí)
- JS重要知識(shí)點(diǎn)小結(jié)
- javascript DOM 操作基礎(chǔ)知識(shí)小結(jié)
- js+jquery常用知識(shí)點(diǎn)匯總
- 詳細(xì)講解JS節(jié)點(diǎn)知識(shí)
- 前端程序員必須知道的高性能Javascript知識(shí)
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JS中向?qū)ο笾刑砑訉?duì)象的3種方法,在JavaScript中對(duì)象可以通過(guò)兩種方法添加對(duì)象,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
超酷的網(wǎng)頁(yè)音樂(lè)播放器DewPlayer使用方法
在網(wǎng)上閑逛的時(shí)候無(wú)意中看到 Dewplayer 播放器，感覺(jué)不錯(cuò)，特此分享。2010-12-12
Js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼時(shí)按鈕延遲操作
在做項(xiàng)目的時(shí)候，經(jīng)常遇到發(fā)短信驗(yàn)證碼的問(wèn)題，這時(shí)候需要用戶點(diǎn)完發(fā)送驗(yàn)證碼按鈕后，一段時(shí)間內(nèi)不能重復(fù)點(diǎn)擊，畢竟驗(yàn)證碼都是收費(fèi)的嘛，誰(shuí)都不想浪費(fèi)，那么如何實(shí)現(xiàn)這種功能呢？下面來(lái)分享一下。2014-06-06
Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解
圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉(zhuǎn)圖的使用實(shí)例詳解，需要的朋友可以參考下2016-05-05
JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例講解
這篇文章主要介紹了JavaScript動(dòng)態(tài)創(chuàng)建div等元素實(shí)例，2016-01-01
js+canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)
這篇文章主要為大家詳細(xì)介紹了js?canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
ES6中Proxy與Reflect實(shí)現(xiàn)重載(overload)的方法
這篇文章主要介紹了ES6中Proxy與Reflect實(shí)現(xiàn)重載(overload)的方法,分析了重載的原理及使用Proxy和Reflect來(lái)實(shí)現(xiàn)重載的操作步驟與相關(guān)技巧,需要的朋友可以參考下2017-03-03
JavaScript仿京東實(shí)現(xiàn)秒殺倒計(jì)時(shí)案例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于uniapp上傳本地圖片以及以二進(jìn)制流的方式上傳的相關(guān)資料,最近在自己寫一個(gè)uniapp的項(xiàng)目,剛好遇到了上傳圖片到服務(wù)器的功能,這里總結(jié)一下,需要的朋友可以參考下2023-07-07
javascript中String對(duì)象的slice()方法分析
這篇文章主要介紹了javascript中String對(duì)象的slice()方法,以實(shí)例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12