页面中写下这样一个盒子作为遮罩层使用
<!-- 遮罩层 -->
<div class="maskBox"></div>
样式部分如下,便可完成遮罩层,并且这样写的遮罩层可以防止事件穿透
.maskBox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
项目中使用时,一般会和弹窗一起使用,或者有比遮罩层更高一层级的东西展示。
所以用z-ingex来设置层级。比如遮罩层是设置99,那比遮罩层更高一级的东西设置100时,就可以在遮罩层之上显示。