<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function hh() {
console.log(111111111)
}
</script>
<style>
.f {
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
overflow: hidden;
display: flex;
/* align-items: center;
justify-content: center; */
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.s {
width: 100%;
height: 300px;
z-index: 300;
background: #fff;
}
#a {
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="f">
<div class="s"></div>
<div id="a"></div>
</div>
</body>
<script>
let a = document.getElementById('a')
a.addEventListener(
'click',
function () {
console.log(1)
},
true
)
</script>
</html>
X
原理:写一个父弹窗弹窗,之后两个子弹窗
上面是内容,下面是空白区域(点击关闭),上边的z-index高过下面的弹窗
.window {
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.counter-window {
width: 100%;
left: 0;
bottom: 0;
z-index: 200;
background: #fff;
}
.win-shadow {
left: 0;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.50);
}