- 时间：2022-04-02 09:53 编辑： 来源： 阅读：
- 扫一扫，手机访问
摘要：js实现弹出窗口、页面变成灰色并不可操作的例子分享
如果你还不会，可以看看下面这个简单的例子。
<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; /* http://www.1sucai.cn */
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>
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
