遮罩解决方案

前言：很久没有写遮罩，差不多忘了，今天遇到点问题做下记录。

备注：遮罩写在body的下一级，防止层级混乱。

思路：1.先把遮罩写好使用“display:none”隐藏；2.设置点击按键，点击通过jq或js修改css样式为显示；3.为防止底层滚动，设置body的overflow:hidden。

//html
<!-- 微信遮罩 -->
<div class="wx_preloader">
    <img src="" alt="">
</div>

//css
/* 遮罩 */
.wx_preloader{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background:rgba(0, 0, 0, 0.5);
  z-index: 100;
}

//js
function show() {
    $('body').css({
        "overflow": "hidden",
        "height": "100vh"
    })
    $(".wx_preloader").css({
        "display": "inline"
    })}

function noShow(){
    $('body').css({
        "overflow": "auto",
        "height": "100vh"
    })
    $(".wx_preloader").css({
       "display": "none"
    })}

    $('#wx').click(show);
    $('.wx_preloader').click(noShow);