Mask layer popups often used to record it
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗</title>
</head>
<body>
<div id="showBtn">点击出现</div>
<div id="popup">
<div class="popup">
<div id="case">
<p class="txt">弹窗</p>
<p class="btnBox"><button class="btn">确定</button></p>
</div>
</div>
</div>
</body>
</html>
css code
#popup {
display: none;
}
.popup{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(90, 90, 90, 0.5);
z-index: 1;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
#case {
width:80%;
height:298px;
border-radius:16px;
background: #fff;
z-index:2;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#case .txt{
width:80%;
height:50%;
font-size:32px;
color:rgba(51,51,51,1);
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
.btnBox{
width:100%;
height:50%;
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
#case .btn{
width:80%;
height:100%;
background:rgba(255,255,255,1);
border:2px solid rgba(238,238,238,1);
box-shadow:0px 2px 0px 0px rgba(238,238,238,1);
border-radius:16px;
font-size:32px;
color:rgba(54,186,26,1);
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
#showBtn{
width: 100px;
height: 100px;
background: #1E8DFF;
margin: auto;
}
js
var popup = $("#popup")[0];
$("#showBtn").on("click",()=>{
popup.style.display= "block";
})
$(".btn").on("click",()=>{
popup.style.display= "none";
})
Simply pop the mask layer is complete.