js實現彈出窗口、頁面變成灰色并不可操作的例子分享

2024-05-06 16:05:39

字體：大中小

來源：轉載

供稿：網友

為了更好的用戶體驗，現在網頁中好多地方都使用彈出層。比如提示登陸，掃描微信二維碼圖片，論壇下載彈出扣除積分提醒等。

如果你還不會，可以看看下面這個簡單的例子。

復制代碼代碼如下:

<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; /* */
      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></div>
<div>點擊關閉</div>
<div>點擊試試</div>
</body>
</html>