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