前端-弹出框底层不可选
前端-弹出框底层不可选
转载：https://blog.csdn.net/llllvvv/article/details/79926656?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-1-79926656.nonecase
修改了一点
效果：
Implementation:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
#hidebg { position:absolute;left:0px;top:0px;
background-color:#000;
width:100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
height: 100%;
filter:alpha(opacity=60); /*设置透明度为60%*/
opacity:0.6; /*非IE浏览器下设置透明度为60%*/
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>
|
