CSSマスク層

2158 ワード


一、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;
}