javascript創(chuàng)建頁面蒙板的一些知識技巧總結

更新時間：2007年08月19日 12:12:45 作者：

(4)設置了background且設置蒙板全透明(0%)的div蒙板。{背后元素可見但不可操作}

(5)使用div生成的蒙板不能遮蓋select，但能遮蓋iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">     <head>     <title></title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <input type="button" onclick="pop()" value="彈出遮罩層" /> <input type="text"  value="輸入框" /> cccccccccccccccc <p>aaaaaaaaaaaa</p> <p>bbbbbbbbbbbbbbbb</p> <select id=""> <option>xxxxxxxxxxxxxx</option> </select> <iframe id="" src="http://www.baidu.com" width="100%" height="300"></iframe> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

(6)使用全透明的iframe生成蒙板。{可遮蓋select：自動隱藏select}

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

(7)div+iframe遮蓋局部select。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">     <head>     <title></title>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <style type="text/css">         *{margin:0px;padding:0px}     </style> </head> <body> <input type="text" id="inbox" style="height:20px;width:140px;line-height:20px;position:absolute;top:50px;left:50px" value="點擊我遮蓋下面的輸入框" onclick="pop()" onblur="undoPop()" /> <select id="" style="position:absolute;top:80px;left:50px"><option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option></select> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

javascript創(chuàng)建頁面蒙板的一些知識技巧總結

JS中向對象中添加對象的3種方法
這篇文章主要給大家介紹了關于JS中向對象中添加對象的3種方法,在JavaScript中對象可以通過兩種方法添加對象,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2023-07-07
超酷的網(wǎng)頁音樂播放器DewPlayer使用方法
在網(wǎng)上閑逛的時候無意中看到 Dewplayer 播放器，感覺不錯，特此分享。
2010-12-12
Js實現(xiàn)手機發(fā)送驗證碼時按鈕延遲操作
在做項目的時候，經(jīng)常遇到發(fā)短信驗證碼的問題，這時候需要用戶點完發(fā)送驗證碼按鈕后，一段時間內不能重復點擊，畢竟驗證碼都是收費的嘛，誰都不想浪費，那么如何實現(xiàn)這種功能呢？下面來分享一下。
2014-06-06
Bootstrap carousel輪轉圖的使用實例詳解
圖片輪播效果在Web中常常能看到，很多人也稱之為幻燈片。這篇文章主要給大家介紹Bootstrap carousel輪轉圖的使用實例詳解，需要的朋友可以參考下
2016-05-05
JavaScript動態(tài)創(chuàng)建div等元素實例講解
這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建div等元素實例，
2016-01-01
js+canvas實現(xiàn)飛機大戰(zhàn)
這篇文章主要為大家詳細介紹了js?canvas實現(xiàn)飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法
這篇文章主要介紹了ES6中Proxy與Reflect實現(xiàn)重載(overload)的方法,分析了重載的原理及使用Proxy和Reflect來實現(xiàn)重載的操作步驟與相關技巧,需要的朋友可以參考下
2017-03-03
JavaScript仿京東實現(xiàn)秒殺倒計時案例詳解
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)京東秒殺倒計時效果，文中示例代碼介紹的非常詳細，感興趣的小伙伴們可以參考一下
2022-03-03
uniapp上傳本地圖片以及以二進制流的方式上傳
這篇文章主要給大家介紹了關于uniapp上傳本地圖片以及以二進制流的方式上傳的相關資料,最近在自己寫一個uniapp的項目,剛好遇到了上傳圖片到服務器的功能,這里總結一下,需要的朋友可以參考下
2023-07-07
javascript中String對象的slice()方法分析
這篇文章主要介紹了javascript中String對象的slice()方法,以實例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12