[设计焦点]前端页面遮罩层实现方法

遮罩层的应用场景：我们在网页中点击在线客服、登录框、反馈工单、弹出框提示框、二维码等图片后，原有的页面信息会被遮挡虚化，这样会聚焦显示某些信息，使用户的关注点集中在页面的某个点上，类似局部照明聚光灯的感觉。这就是使用遮罩层的作用。

就拿本站的登录功能来举例：

遮罩层的使用也是为了优化用户的体验。

<div class="masked"></div>

.masked {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0,0.75);
    z-index: 99999;
    display: none;
}

使用固定定位position: fixed相对于浏览器窗口进行定位。 这样遮罩层不会随着页面的滑动而看不见，而会随着页面滚动一起滚动。