弹窗后网页不可操作
<!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>
轉載于:https://www.cnblogs.com/xihuanjiuquqiqang/p/10213878.html
總結
- 上一篇： iOS开发线程同步技术-锁
- 下一篇： 与MYSQL的零距离接触（数据类型）