<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </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">hello</h1> </header> <div class="mui-content"> <!--卡片视图--> <div class="mui-card" style="margin: 10px;"> <div class="mui-card-content" style="line-height: 0px;"> <img src="imgs/banner1.png" width="100%;"> </div> <div class="mui-card-footer"> <div class="mui-media-body" > 小M <p>发布于2016-06-30 15：30</p> </div> </div> </div> <!--遮罩蒙版--> <button type="button" onClick="show_zhezhao()">显示遮罩层</button> </div> </body> <script type="text/javascript"> function show_zhezhao(){ var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调； mask.show();//显示遮罩 } function callback(){ mui.toast('您取消了操作'); } </script> </html>