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();