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è)置的大點即可。可是這里有一些問題和技巧可能是您一直都不知道或者不清楚的，這里總結(jié)幾點，這些都是個人學(xué)習(xí)的過程中發(fā)現(xiàn)的。
1、創(chuàng)建的蒙板如果要禁止對蒙板下部內(nèi)容的操作必須設(shè)置background屬性且必須設(shè)置一個有效的值，否則雖然遮罩層創(chuàng)建成功，但仍然可以對頁面下部的元素進(jìn)行操作。
2、如果要顯示頁面底部的元素可以通過css設(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)容，其實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è)置透明度來實現(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)容，其實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)文章
這篇文章主要為大家詳細(xì)介紹了如何運用js教你輕松制作html音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了微信小程序swiper禁止用戶手動滑動代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
[藍(lán)色]顏色漸變效果...2006-07-07
條件表達(dá)式，是我們在coding過程中永遠(yuǎn)躲不開的問題，也是我們騙代碼行數(shù)最方便的東西，但作為一名程序員，我們也要追求自己的“信達(dá)雅”，下面就讓我們看看以下幾種常見的條件表達(dá)場景，如何寫的漂亮！2021-05-05
本文將詳細(xì)介紹a標(biāo)簽上的點擊事件的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了詳解ES6中的三種異步解決方案，詳細(xì)的介紹了這三種方案的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了director.js實現(xiàn)前端路由使用實例,director.js是最純粹的路由注冊/解析器,它在不刷新頁面的情況下,利用“#”符號組織不同的URL路徑,需要的朋友可以參考下2015-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序如何獲取圖片寬度與高度的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)京東商品分類側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
下面小編就為大家?guī)硪黄P(guān)于Promise 異步編程的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09