MUI 遮罩蒙版

ゞ浴缸里的玫瑰 2023-07-19 12:28 31阅读 0赞

在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：

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

<!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>MUI 遮罩蒙版</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="css/mui.min.css" rel="stylesheet" />
            <style>
            .mui-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 998;
        background-color: rgba(0,0,0,3);
    }
            </style>
        </head>
        <body>
              <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">MUI 遮罩蒙版</h1>
        </header>
          <div class="mui-content">
              <button type="button" onclick="show()">测试遮罩蒙版</button>
          </div>
            <script src="js/mui.min.js"></script>
            <script type="text/javascript">
                mui.init(); 
                function show(){
                    var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
                    mask.show(); //显示遮罩
                }
                function callback(){
                    mui.toast("蒙版关闭");
                }
            </script>
        </body>
    </html>

![aHR0cHM6Ly93d3cuZ2Vla2VzLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA0L2VlZS0xNzJ4MzAwLmdpZg][]

[aHR0cHM6Ly93d3cuZ2Vla2VzLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA0L2VlZS0xNzJ4MzAwLmdpZg]: /images/20230528/fa91bfb166fe44ef98873bcb9e29fb48.png