js實現(xiàn)彈出窗口、頁面變成灰色并不可操作的例子分享
更新時間：2014年05月10日 09:34:51 作者：
為了更好的用戶體驗，現(xiàn)在網(wǎng)頁中好多地方都使用彈出層。比如提示登陸，掃描微信二維碼圖片，論壇下載彈出扣除積分提醒等。
如果你還不會，可以看看下面這個簡單的例子。
<html>
<head>
<title>彈出一個窗口后，后面的層不可操作</title>
<script>
function show() //顯示隱藏層和彈出層
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //顯示隱藏層
hidebg.style.height=document.body.clientHeight+"px"; //設置隱藏層的高度為當前頁面高度
document.getElementById("hidebox").style.display="block"; //顯示彈出層
}
function hide() //去除隱藏層和彈出層
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
</script>
<style>
body { margin:0px;padding:0px;text-align: center;}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*寬度設置為100%，這樣才能使隱藏背景層覆蓋原頁面*/
filter:alpha(opacity=60); /*設置透明度為60%*/
opacity:0.6; /*非IE瀏覽器下設置透明度為60%*/
display:none; /* http://www.dbjr.com.cn */
z-Index:2;}
#hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
#content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">點擊關(guān)閉</div>
<div id="content" onClick="show();">點擊試試</div>
</body>
</html>
復制代碼 代碼如下:
<html>
<head>
<title>彈出一個窗口后，后面的層不可操作</title>
<script>
function show() //顯示隱藏層和彈出層
{
var hideobj=document.getElementById("hidebg");
hidebg.style.display="block"; //顯示隱藏層
hidebg.style.height=document.body.clientHeight+"px"; //設置隱藏層的高度為當前頁面高度
document.getElementById("hidebox").style.display="block"; //顯示彈出層
}
function hide() //去除隱藏層和彈出層
{
document.getElementById("hidebg").style.display="none";
document.getElementById("hidebox").style.display="none";
}
</script>
<style>
body { margin:0px;padding:0px;text-align: center;}
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*寬度設置為100%，這樣才能使隱藏背景層覆蓋原頁面*/
filter:alpha(opacity=60); /*設置透明度為60%*/
opacity:0.6; /*非IE瀏覽器下設置透明度為60%*/
display:none; /* http://www.dbjr.com.cn */
z-Index:2;}
#hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointer;z-Index:3;}
#content { text-align:center;cursor:pointer;z-Index:1;}
</style>
</head>
<body>
<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">點擊關(guān)閉</div>
<div id="content" onClick="show();">點擊試試</div>
</body>
</html>
您可能感興趣的文章:
- JS如何實現(xiàn)在彈出窗口中加載頁面
- 禁止iframe頁面的所有js腳本如alert及彈出窗口等
- JavaScript頁面刷新與彈出窗口問題的解決方法
- js右下角彈出窗口,點擊可關(guān)閉效果
- js實現(xiàn)右下角窗口彈出窗口效果
- JS封裝的模仿qq右下角消息彈窗功能示例
- 純js的右下角彈窗實例
- JS實現(xiàn)簡單的右下角彈出提示窗口完整實例
- JS非Alert實現(xiàn)網(wǎng)頁右下角“未讀信息”效果彈窗
- js實現(xiàn)仿MSN帶關(guān)閉功能的右下角彈窗代碼
- javascript實現(xiàn)的右下角彈窗實例
- js 右下角彈窗效果代碼(IE only)
- javascript實現(xiàn)簡約的頁面右下角點擊彈出窗口示例【測試可用】
相關(guān)文章
Javascript中prototype屬性實現(xiàn)給內(nèi)置對象添加新的方法
這篇文章主要介紹了Javascript中prototype屬性實現(xiàn)給內(nèi)置對象添加新的方法,涉及javascript中prototype屬性的使用技巧,需要的朋友可以參考下2015-05-05
JS學習筆記之數(shù)組去重實現(xiàn)方法小結(jié)
這篇文章主要介紹了JS學習筆記之數(shù)組去重實現(xiàn)方法,結(jié)合實例形式總結(jié)分析了javascript數(shù)組去重的5種常見實現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本文主要介紹了uniapp集成Echarts，實現(xiàn)地圖圖表的展示，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-06-06
js以對象為索引的關(guān)聯(lián)數(shù)組
在代碼邏輯中更多的是用關(guān)聯(lián)數(shù)組的方式。但即使是這樣我們也很少使用對象類型作為鍵值對的鍵名。2010-07-07
今天小編就為大家分享一篇layui 監(jiān)聽表格復選框選中值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript編寫實現(xiàn)飛機大戰(zhàn)
這篇文章主要為大家詳細介紹了JavaScript編寫實現(xiàn)飛機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了微信小程序使用radio顯示單選項功能,涉及針對radio組件事件響應相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
JS字符串累加Array不一定比字符串累加快(根據(jù)電腦配置)
言歸正傳：性能差異較大的機器運行結(jié)果會RT 出現(xiàn)大的差異,為了保險起見。還是推薦使用Array 來進行字符串拼接操作2012-05-05
javascript的propertyIsEnumerable()方法使用介紹
propertyIsEnumerable()是用來檢測屬性是否屬于某個對象的,如果檢測到了,返回true,否則返回false，下面為大家介紹下其具體的使用2014-04-04
這篇文章主要為大家詳細介紹了Bootstrap BootstrapDialog使用的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02