快捷導(dǎo)航

js實(shí)現(xiàn)彈出窗口、頁面變成灰色并不可操作的例子分享

更新時(shí)間：2014年05月10日 09:34:51 作者：

為了更好的用戶體驗(yàn)，現(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";  //設(shè)置隱藏層的高度為當(dāng)前頁面高度
   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%;  /*寬度設(shè)置為100%，這樣才能使隱藏背景層覆蓋原頁面*/
      filter:alpha(opacity=60);  /*設(shè)置透明度為60%*/
      opacity:0.6;  /*非IE瀏覽器下設(shè)置透明度為60%*/
      display:none; /* http://m.fzitv.net */
      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();">點(diǎn)擊關(guān)閉</div>
<div id="content" onClick="show();">點(diǎn)擊試試</div>
</body>
</html>

您可能感興趣的文章:

js
彈窗

相關(guān)文章

JavaScript html5 canvas畫布中刪除一個塊區(qū)域的方法
這篇文章主要介紹了JavaScript html5 canvas畫布中刪除一個塊區(qū)域的方法,涉及JavaScript結(jié)合html5操作canvas畫布圖形繪制的技巧,需要的朋友可以參考下
2016-01-01
uni-app使用Vite.config.js配置文件的超詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于uni-app使用Vite.config.js配置文件的超詳細(xì)教程,在uniapp開發(fā)中,vue.config.js是配置webpack的關(guān)鍵文件之一,也可以說是uniapp項(xiàng)目自定義配置的中心,需要的朋友可以參考下
2023-12-12
JavaScript實(shí)現(xiàn)的冒泡排序法及統(tǒng)計(jì)相鄰數(shù)交換次數(shù)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的冒泡排序法及統(tǒng)計(jì)相鄰數(shù)交換次數(shù),結(jié)合實(shí)例形式分析了javascript冒泡排序的實(shí)現(xiàn)技巧及針對交換次數(shù)的統(tǒng)計(jì)方法,便于更直觀的了解冒泡排序算法,需要的朋友可以參考下
2017-04-04
一篇文章搞懂JavaScript中的代理和代理的使用
這篇文章主要為大家詳細(xì)介紹了JavaScript代理和代理的使用的方法，感興趣的小伙伴們可以參考一下，希望能給你帶來幫助
2021-08-08
微信小程序?qū)崿F(xiàn)吸頂效果的方法實(shí)例
在微信小程序的開發(fā)中,經(jīng)常會有列表分類標(biāo)簽隨著界面滾動吸頂?shù)男Ч?下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)吸頂效果的相關(guān)資料,需要的朋友可以參考下
2021-08-08
JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法實(shí)例
很多網(wǎng)站在做活動時(shí)會出現(xiàn)一個截止時(shí)間倒計(jì)時(shí)的提示,下面這篇文章主要給大家介紹了JavaScript實(shí)現(xiàn)倒計(jì)時(shí)功能2種方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
Javascript實(shí)現(xiàn)代碼折疊功能
代碼折疊起來,使整段程序縮成一行,看起來清爽了許多。大家在使用Visual Studio環(huán)境進(jìn)行開發(fā)時(shí)，可以把某個類或某個函數(shù)折疊起來，在很多網(wǎng)頁上也有類似的功能，那到底是如何實(shí)現(xiàn)的呢？其實(shí)很簡單，只要通過JavaScript就可以實(shí)現(xiàn)。
2016-08-08
js 如何實(shí)現(xiàn)對數(shù)據(jù)庫的增刪改查
JavaScript操作數(shù)據(jù)庫JS操作Access數(shù)據(jù)庫，跟其他語言操作差不多，總結(jié)了一下習(xí)慣代碼，需要的朋友可以參考下
2012-11-11
JS表的模擬方法
這篇文章主要介紹了JS表的模擬方法,涉及javascript模擬表的生成、添加與刪除節(jié)點(diǎn)的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
淺談微信小程序列表埋點(diǎn)曝光指南
這篇文章主要介紹了微信小程序列表埋點(diǎn)曝光指南，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10