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