MUI 弹出菜单被子页面挡住的解决方法

MUI 弹出菜单被子页面挡住的解决方法

MUI 在使用弹出菜单时，若使用了子页面，而在主页面弹出菜单，则弹出菜单会被子页面挡住，如图：

解决方法有三种：
1.父页面按钮被点击之后，父页面通知子页面，在子页面弹出菜单（弹出菜单代码在子页面而非主页面），待用户选择菜单项后，子页面又通知父页面被点击的菜单项，然后父页面做出相应。此方法需改变所以子页面，比较麻烦
2.新建一个新的页面，专门用于弹出菜单，用一张灰色的透明图片模拟遮罩蒙版。
3.使用原生方法弹出，可绝对置顶。此方法因为使用了原生方法，所以不易修改菜单的样式。

此篇文字详细讲解第二种方法：
步骤一：新建一个html文件，名为meau.html
步骤二：在meau.html文件中写入如下代码

	
	
	
	
	



	
	

		

		

			

				
					
						
					 添加好友
					
				
			
			

				 创建群聊 
			
			

				 刷新
			
			

				 首页 
			
		
	

步骤三：（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

最终效果：