css

.mask{
display: none;
position: fixed;
width: 100%;
height: 100%;
top:0;
background: rgba(0, 0, 0 ,0.5);
z-index: 99;
}
.mask-red{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
width: 18.5rem;
height: 20rem;
border-radius: 14px;
background-image: -webkit-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: -moz-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: -o-linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
background-image: linear-gradient(-90deg, rgb(254,111,98) 0%, rgb(255,56,70) 100%);
}
.mask-white{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
border-radius: 14px;
width: 16.5rem;
height: 18rem;
background: #fff;
}
.mask-img{
width: 11.1rem;
height: 11.05rem;
position: absolute;
left: 0;
right: 0;
top: -6.5rem;
margin: auto;
}
.mask-announcement{
margin-top: 3.5rem;
padding: 1rem;
}
.mask-tit{
font-size: 1.4rem;
color: #ec5d5d;
}
.mask-sub{
font-size: 1rem;
color: #666;
}
.mask-sub-small{
font-size: 0.85rem;
color: #999;
}
.mask .submit-btn{
position: absolute;
left: 0;
right: 0;
bottom: 1rem;
width:13rem;
line-height: 2.8rem;
margin: 0 auto;
box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(236, 93, 93, 0.3);
}
/*关闭*/
.mask-close{
position: absolute;
left: 0;
right: 0;
bottom: -5rem;
text-align: center;
color: #fff;
}
.mask-close i{
font-size: 2.5rem;
}

html

<div class="mask">
<div class="mask-red">
<div class="mask-white">
<img src="../../images/qiandao_lihe.gif" class="mask-img" />
<div class="mask-announcement">
<h3 class="mask-tit mui-text-center lsy-padded-t-10 lsy-padded-b-10">恭喜您签到成功</h3>
<p class="mask-sub mui-text-center lsy-padded-b-10">积分已发放到我的积分里</p>
<p class="mask-sub-small mui-text-center lsy-padded-b-10">签到可获得10积分，积分可用来升级会员等级</p>
<div class="submit-btn lsy-margin-t-15 white-color">去我的积分看看</div>
</div>
<div class="mask-close"><i class="mui-icon iconfont icon-guanbi"></i></div>
</div>
</div>

</div>

js

<script src="../../js/jquery.min.js"></script>
<script type="text/javascript">
mui.init();
$(".mask").hide()
$("#check").click(function() {
$(".mask").show()
});
$(".mask").on(‘touchmove‘,function(e){
e.preventDefault(); //阻止默认遮罩后滚动行为
})
$("#close").click(function() {
$(".mask").hide()
});

</script>

app遮罩层--网赚