MUI 弹出菜单被子页面挡住的解决方法
MUI 在使用弹出菜单时，若使用了子页面，而在主页面弹出菜单，则弹出菜单会被子页面挡住，如图：解决方法有三种： 1.父页面按钮被点击之后，父页面通知子页面，在子页面弹出菜单（弹出菜单代码在子页面而非主页面），待用户选择菜单项后，子页面又通知父页面被点击的菜单项，然后父页面做出相应。此方法需改变所以子页面，比较麻烦 2.新建一个新的页面，专门用于弹出菜单，用一张灰色的透明图片模拟遮罩蒙版。 3.使用原生方法弹出，可绝对置顶。此方法因为使用了原生方法，所以不易修改菜单的样式。
此篇文字详细讲解第二种方法： 步骤一：新建一个html文件，名为meau.html 步骤二：在meau.html文件中写入如下代码
<head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" href="../css/mui.css" type="text/css" charset="utf-8" /> <style type="text/css"> html { width: 100%; height: 100%; } body { height: 100%; background-color: transparent; } .mui-popover .mui-popover-arrow { left: auto; right: 10px!important; } .mui-popover { display: block; width: auto; opacity: 1; text-align: center; } .mui-table-view-cell> a:not(.mui-btn) { color: #000; } </style> </head> <body> <a style="display: block;height: 100%; background:url(../img/mask.png);"></a> <div id="topPopover" class="mui-popover" style="position:fixed ;top: 60px;right:5px;"> <div class="mui-popover-arrow" style="top: -30px;"></div> <ul class="mui-table-view" style="color: #fff; top: -4px;right: 0;"> <li class="mui-table-view-cell "> <a id="addfriend" href="javascript:;"> <!--<button id="addfriend" class="mui-btn mui-btn-blue mui-btn-link">--> 添加好友 <!--</button>--> </a> </li> <li class="mui-table-view-cell "> <a id="previous" href="javascript:;"> 创建群聊 </a> </li> <li class="mui-table-view-cell "> <a id="refresh" href="javascript:;"> 刷新</a> </li> <li class="mui-table-view-cell "> <a id="homePage" href="javascript:;"> 首页 </a> </li> </ul> </div> </body> <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init({ preloadPages:[{ id:'tab-webview-main.html', url:'tab-webview-main.html' } ] }); mui.plusReady(function() { ws = plus.webview.currentWebview(); ws.setStyle({ mask: "none" }); window.addEventListener("tap", function() { ws.hide(); }); window.addEventListener("dragstart", function() { ws.hide(); }); document.getElementById('addfriend').addEventListener('tap', function(e) { e.detail.gesture.preventDefault(); var selfPage = plus.webview.currentWebview(); var openerPage = selfPage.opener(); mui.fire(openerPage,'addfriend1',{aaa:"aaa",bbb:"bbb"}); selfPage.close(); openerPage.show(); }, false); }); </script> 步骤三：（1）在主页面中添加触发弹出菜单的按钮 代码为： `button id="menu" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">` （2）对meau.html进行预加载 var floatw = null; // 创建子页面，首个选项卡页面显示，其它均隐藏； mui.plusReady(function() { var self = plus.webview.currentWebview(); floatw = plus.webview.create("menu.html", "menu.html", { background: 'transparent', zindex: 10, }); });（3）为按钮添加监听事件
document.getElementById('menu').addEventListener('tap', function() { if(floatw) { // 避免快速多次点击创建多个窗口 //floatw.show("fade-in",300); plus.webview.show("menu.html","fade-in",300); } else { floatw = plus.webview.create("menu.html", "menu", { background: 'transparent', zindex: 10, }); floatw.show("fade-in",300); } });执行完以三个步骤后即可弹出菜单了，但是没有遮罩蒙版的效果
步骤四：添加透明图片，达到遮罩蒙版的效果，没找到如何上传图片文件，有需要此透明图片可练习小编，QQ247210380
最终效果：
