mask 遮罩层弹窗禁止页面滚动

1、css 样式：

.mask{
    background: rgba(59, 59, 59, 0.9);
    /* opacity: 0.9; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}
.pop{
    background-color: #fff;
    position: fixed;
    width: 650px;
    padding: 20px 50px 50px;
    left: 50%;
    border-radius: 0.3rem;
    top: 45%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1002;
    display: none;
}

2、点击事件：

$('.btn1').click(function() {
    $('.mask').css({'display': 'block'});
    $('.pop').css({'display': 'block'});
})
$('.mask').click(function() {
    $('.mask').css({'display': 'none'});
    $('.pop').css({'display': 'none'});
})

因为页面有滚动条，所以此时，滚动条依然存在

  

 

 

 解决办法如下：

//开启遮罩层
function showMask(){
    //mask 高度设置为页面高度
    $(".mask").css("height",$(document).height());     
    $(".mask").css("width","100%");
    $(".mask").show();
    //隐藏页面滚动条
    $('body').css("overflow","hidden");
}  
//关闭遮罩层  
function hideMask(){         
    $(".mask").hide();  
    $('body').css("overflow","auto");
}

4、在点击事件分别引入：

showMask();
hideMask();