现在的位置: 首页 -> 前端学习 -> JS前端 -> js弹出一个窗口后，后面的层不可操作

js弹出一个窗口后，后面的层不可操作

2014-05-05 23:00 ⁄ 评论数 0 ⁄ 被浏览 13081 views+

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

<html>

<head>

<title>弹出一个窗口后，后面的层不可操作</title>

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.daixiaorui.com */

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>

</body>

</html>