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);
}
});
执行完以三个步骤后即可弹出菜单了,但是没有遮罩蒙版的效果
步骤四:添加透明图片,达到遮罩蒙版的效果,没找到CSDN如何上传图片文件,有需要此透明图片可练习小编,QQ247210380
最终效果: