css 遮罩层实现 |纯css 跳转页面

.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
z-index: 999;
display: none;
}

首先大家定义一个类名为 mask 的元素，设置其定位方式为固定定位（position:fixed），让它覆盖整个页面（top:0; left:0; width:100%; height:100%），背景颜色为黑色并设置透明度为 0.8（background-color:rgba(0,0,0,0.8)）。因为大家希望这个遮罩层在浮出层之上，所以设置它的 z-index 值为 999。最后将它的显示方式设置为不显示（display:none）。

.pop{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1000;
background-color: #fff;
padding: 20px;
display: none;
}

接着大家再定义另一个类名为 pop 的元素，同样设置其定位方式为固定定位（position:fixed）。由于大家希望该元素居中显示，所以将它的 top 和 left 属性都设置为 50%，然后再利用 transform 属性，将它向左和向上移动自身宽高的一半（transform:translate(-50%,-50%)）。同样还需要设置 z-index 值，确保它在遮罩层之上（z-index:1000）。最后将它的背景颜色设置为白色（background-color:#fff），并添加一些 padding，使其内容不紧贴边缘。同样将其初始的显示方式设置为不显示（display:none）。

document.getElementById("btn").addEventListener("click",function(){
document.querySelector(".mask").style.display = "block";
document.querySelector(".pop").style.display = "block";
});

最后大家需要在点击某个按钮时，让遮罩层和浮出层同时出现。这里大家可以利用 JavaScript，在点击按钮时，将遮罩层和浮出层的 display 属性设置为 block。

代码片段：

<button id="btn">弹出浮出层</button>
<div class="mask"></div>
<div class="pop">
<p>这里是浮出层的内容，可以放置一些表单、图片等等。</p>
</div>

最后，添加事件监听:

<script>
document.getElementById("btn").addEventListener("click",function(){
document.querySelector(".mask").style.display = "block";
document.querySelector(".pop").style.display = "block";
});
</script>

这就是 CSS 遮罩层的实现方法。