遮罩层的实现

Posted 2020-10-17

一、方法一

#cover{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: 0.5;
    -webkit-filter: alpha(opacity=50);
    -moz-filter: alpha(opacity=50);
    filter: alpha(opacity=50);
    z-index: 2;
}

若用此方法，拉动滚动条时会出现页面下部遮罩层盖不住的情况，原因在于position取值为absolute，此时可以结合js或者jquery动态设置遮罩层的宽和高，从而实现全覆盖：

$("#cover").css({ "width": $(document).width(), "height": $(document).height() });

 

document.getElementById("cover").style.width = document.documentElement.clientWidth|document.body.clientWidth+"px";

document.getElementById("cover").style.height = document.documentElement.clientHeight|document.body.clientHeight+"px";

 

 二、方法二

     或者直接给position取值为 fixed，避免页面的滚动

#cover{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    opacity: 0.5;
    -webkit-filter: alpha(opacity=50);
    -moz-filter: alpha(opacity=50);
    filter: alpha(opacity=50);
    z-index: 2;
}