加载的子页面遮住了主页面的弹出层

这时popover应该从子页面弹出，参考hello mui中的popover，点击右上角图标弹出的popover，就是一个跨webview的popover；

就是说弹出内容放在子页面弹出？

终于搞定了，分享一下：主页面的需要切换的导航

<div class="it-banner bar-tap">  
            <div class="bar-item" id="popda">  
                <a href="javascript:void(null);" id="popa0" class="it-active">款 式</a>  
                <span class="it-tip" id="popspan0"></span>  
            </div>  
            <div class="bar-item" id="popdb">  
                <a href="javascript:void(null);" id="popa1">材 质</a>  
                <span id="popspan1"></span>  
            </div>  
            <div class="bar-item" id="popdc">  
                <a href="javascript:void(null);" id="popa2">价格</a>  
                <span id="popspan2"></span>  
            </div>  
        </div>

主页面点击导航事件：

document.getElementById("popda").addEventListener("tap",function(){  
    for(var i=0;i<3;i++){  
        document.getElementById("popspan"+i).className = "";  
        document.getElementById("popa"+i).className = "";  
    }  
    document.getElementById("popspan0").className = "it-tip";  
    document.getElementById("popa0").className = "it-active";  
    var child = plus.webview.getWebviewById("class-list.html").evalJS("selectCart(0)");  
});

子页面弹出层代码 ：

<div class="popup" id="popup0">  
            <a href="javascript:void(null);" class="popup-cla pop-active">戒子</a>  
            <a href="javascript:void(null);" class="popup-cla">戒子</a>  
            <a href="javascript:void(null);" class="popup-cla">戒子</a>  
            <a href="javascript:void(null);" class="popup-cla">戒子</a>  
            <a href="javascript:void(null);" class="popup-cla">戒子</a>  
            <a href="javascript:void(null);" class="popup-cla">戒子</a>  

            <div class="popup-btn">  
                <a href="javascript:void(null);" class="popup-ok">确 定</a>  
                <a href="javascript:void(null);" class="popup-ok" onclick="cancelSelect(0)">取 消</a>  
            </div>  
        </div>  

        <div class="popup" id="popup1">  
            <a href="javascript:void(null);" class="popup-cla pop-active">足金</a>  
            <a href="javascript:void(null);" class="popup-cla">纯金</a>  
            <a href="javascript:void(null);" class="popup-cla">翡翠</a>  
            <a href="javascript:void(null);" class="popup-cla">玉石</a>  

            <div class="popup-btn">  
                <a href="javascript:void(null);" class="popup-ok">确 定</a>  
                <a href="javascript:void(null);" class="popup-ok">取 消</a>  
            </div>  
        </div>  
<div class="popup" id="popup2">  
            <a href="javascript:void(null);" class="popup-cla pop-active">0-100</a>  
            <a href="javascript:void(null);" class="popup-cla">100-300</a>  
            <a href="javascript:void(null);" class="popup-cla">300-500</a>  
            <a href="javascript:void(null);" class="popup-cla">500以上</a>  

            <div class="popup-btn">  
                <a href="javascript:void(null);" class="popup-ok">确 定</a>  
                <a href="javascript:void(null);" class="popup-ok">取 消</a>  
            </div>  
        </div>

子页面函数：

function selectCart(n){  
    for(var i=0;i<3;i++){  
        document.querySelector("#popup"+i).style.display = "none";  
    }  
    document.querySelector("#popup"+n).style.display = "block";  
}  

function cancelSelect(n){  
    document.querySelector("#popup"+n).style.display = "none";  
}

没有用其它插件，感觉js控制代码要写好多，希望有更好的代码

感谢代码分享，不过子页面函数没必要写这么复杂，如下函数就可以：

function selectCart(n){  
  mui("#popup"+n).popover("toggle")  
}

甚至，子页面都可以不写函数，直接在父页面中写如下代码也可以：

plus.webview.getWebviewById("class-list.html").evalJS("mui('#popup"+n+"'"+").popover('toggle')");

好的，谢谢，因为我没有用mui的样式框架，所以怕运行不起

有没有哪位兄台做过水平、垂直都居中的弹出框啊，想不用jq，但写起来很麻烦啊。我觉得MUI里面的弹出框不好用啊。位置不固定、而且有箭头，很多应用场景都不太适合，UI设计出来的图也不是这样的。