html点击空白处关闭,写一个点击空白区域关闭遮罩的效果

Document

function hh() {

console.log(111111111)

}

.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);

}

let a = document.getElementById('a')

a.addEventListener(

'click',

function () {

console.log(1)

},

true

)

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);

}