码迷,mamicode.com
首页 > Web开发 > 详细

弹窗后网页不可操作

时间:2019-01-03 15:06:15      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:add   splay   ext   position   透明   pad   不可   dex   type   


<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8">
<title>弹出窗口后网页不可操作</title> 
<script src="js/js"></script> 
<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> 
#hidebg { position:absolute;left:0px;top:0px; 
background-color:#000; 
width:100%; /*宽度设置为100%,这样才能使隐藏背景层覆盖原页面*/ 
height: 100%;
filter:alpha(opacity=60); /*设置透明度为60%*/ 
opacity:0.5; /*非IE浏览器下设置透明度为50%*/ 
display:none;
z-Index:2;} 
#hidebox { text-align: right;position:absolute;width:400px;height:300px;top:200px;left:30%;border-radius: 5px;background-color:#fff;display:none;z-Index:3;padding: 10px;} 
#content { text-align: center;cursor:pointer;z-Index:1;} 
</style> 
</head> 
<body>
<div id="hidebg"></div>
<div id="hidebox"><span onClick="hide();" style="cursor:pointer;">关闭</span></div>
<div id="content" onClick="show();">点击打开</div>
</body>
</html>

弹窗后网页不可操作

标签:add   splay   ext   position   透明   pad   不可   dex   type   

原文地址:https://www.cnblogs.com/xihuanjiuquqiqang/p/10213878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!