<div class="mask-box"></div>
<div class="dialog-box">
弹窗内容
</div>
通过fixed定位实现, ".mask-box" 模拟背景,".dialog-box"作为弹窗容器,里面写弹窗的内容。
通过控制样式,切换 display:block ; display: none; 实现点击出现、点击关闭弹窗。
.mask-box{
/* 切换 display:block ; display: none;*/
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background:rgba(0,0,0,0.7)
z-index: 98;
}
.dialog-box{
/* 切换 display:block ; display: none;*/
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 200px;
background: #fff;
/* 按实际情况 设置z-index */
z-index: 98;
}