CSS遮罩层

 

一、mui遮罩层：

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
mask.show();//显示遮罩
mask.close();//关闭遮罩

注意：关闭遮罩仅会关闭，不会销毁；关闭之后可以再次调用mask.show();打开遮罩；

mui默认的蒙版遮罩使用.mui-backdrop类定义（如下代码），若需自定义遮罩效果，只需覆盖定义.mui-backdrop即可；

.mui-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    background-color: rgba(0,0,0,.3);
}

二、自定义的遮罩层及居中的白板：

#popup {
 position: absolute;
 z-index: 9998;
 top: 0;
 left: 0;
 background-color: rgba(0,0,0,0.3);
 height: 100%;
 width: 100%;
 display:none;
 justify-content:center;
 align-items:center;
}

#popUpBody {
 border-radius: 6px;
 width:240px;
 height: 260px;
 z-index: 9999;
 display:inline-block;
 background-color: white;
 padding: 20px;
 text-align: center;
}