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

ttx9n · 发表于 2014-5-10 09:34:51

为了更好的用户体验，现在网页中好多地方都使用弹出层。比如提示登陆，扫描微信二维码图片，论坛下载弹出扣除积分提醒等。如果你还不会，可以看看下面这个简单的例子。
复制代码代码如下:
<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; /* //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>

ki9ku6 · 发表于 2022-8-8 08:51:25

飞飞飞飞飞飞飞飞飞飞飞飞飞

81708585 · 发表于 2022-9-8 17:22:21

554411515451555

3t0ukmu · 发表于 2022-10-23 21:50:19

了乐趣了去了去了去了去了

errol123 · 发表于 2022-12-6 20:04:29

谢谢楼主分享

locopy · 发表于 2022-12-12 22:09:49

激动人心，无法言表！

小伙伴 · 发表于 2023-1-10 22:27:08

那三门，你们谁寂寞才快乐撒

额呵呵 · 发表于 2023-4-9 16:02:37

管灌灌灌灌灌灌灌灌灌灌

ki9ku6 · 发表于 2023-4-9 18:56:31

挺不错的东西

mightylemon101 · 发表于 2023-5-8 16:44:29

快更新啊，我擦

账号		自动登录	找回密码
密码			立即注册

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

相关帖子