js实现弹出窗口、页面变成灰色并不可操作的例子分享

时间：2021-01-24 11:07:08|栏目：JavaScript代码|点击：次

如果你还不会，可以看看下面这个简单的例子。

 
<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; /* https://www.jb51.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();">点击关闭</div>
 
<div id="content" onClick="show();">点击试试</div>
 
</body>
 
</html>

上一篇：Django模板继承 extend标签实例代码详解

栏目：JavaScript代码

下一篇：微信浏览器左上角返回按钮监听的实现

本文标题：js实现弹出窗口、页面变成灰色并不可操作的例子分享

本文地址：http://www.codeinn.net/misctech/50200.html

更多JavaScript代码

JavaScript代码

js实现弹出窗口、页面变成灰色并不可操作的例子分享

阅读排行

推荐教程