父webview中预加载的popover弹出菜单，当子页面显示后，父页面会被覆盖掉

分类：MUI

mui

父webview中预加载的popover弹出菜单，当子页面显示后，父页面会被覆盖掉
代码如下：

<!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="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
    </head>  

    <body>  
        <div class="mui-content">  

            <header class="mui-bar mui-bar-nav">  
                <a href="javascript:history.go( -1 );" class="mui-icon mui-icon-left-nav mui-pull-left"></a>  
                <a id="classMenu" class="mui-icon mui-icon-bars mui-pull-right"></a>  
                <h1 class="mui-title">首页</h1>  
            </header>  
        </div>  

    </body>  
    <script>  
        mui.plusReady(function() {  
            mui.preload({  
                id: 'menu',  
                url: 'menu.html',  
                show: {  
                    autoShow: true  
                }  

            });  
        });  

        document.getElementById('classMenu').addEventListener('tap', function() {  

            plus.webview.getWebviewById('menu').evalJS('mui("#topPopover").popover("toggle")');  
            plus.webview.currentWebview().append(plus.webview.getWebviewById('menu'));  
        });  
    </script>  

</html>

子页面

<!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="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  
    </script>  
    <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
            /*header.mui-bar {  
                display: none;  
            }*/  

            .mui-content {  
                padding: 10px;  
            }  
    </style>  
    <style>  
            /*跨webview需要手动指定位置*/  

            #topPopover {  
                position: fixed;  
                top: 16px;  
                right: 6px;  
            }  
            #topPopover .mui-popover-arrow {  
                left: auto;  
                right: 6px;  
            }  
            #actionSheet .mui-table-view {  
                border-radius: 4px;  
            }  
            #actionSheet .mui-table-view-cell {  
                padding: 15px;  
                text-align: center;  
            }  
            #actionSheet .mui-table-view .mui-table-view-cell:first-child,  
            #actionSheet .mui-table-view .mui-table-view-cell:first-child>a:not(.mui-btn) {  
                border-top-right-radius: 4px;  
                border-top-left-radius: 4px;  
            }  
            #actionSheet .mui-table-view .mui-table-view-cell:last-child,  
            #actionSheet .mui-table-view .mui-table-view-cell:last-child>a:not(.mui-btn) {  
                border-bottom-right-radius: 4px;  
                border-bottom-left-radius: 4px;  
            }  
            .mui-backdrop-action.mui-backdrop {  
                bottom: 0;  
            }  
            p {  
                text-indent: 22px;  
            }  
            span.mui-icon {  
                font-size: 14px;  
                color: #007aff;  
                margin-left: -15px;  
                padding-right: 10px;  
            }  
            .mui-popover {  
                height: 300px;  
            }  
        </style>  
</head>  
<body>  
    <div class="mui-content">  
        <!--右上角弹出菜单-->  
        <div id="topPopover" class="mui-popover">  
            <div class="mui-popover-arrow"></div>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell"> <a href="#">Item1</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item2</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item3</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item4</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item5</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item6</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item7</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item8</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item9</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item10</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  

        </div>  
    </div>  
    <script>  
            mui('.mui-scroll-wrapper').scroll();  
    </script>  
</body>  
</html>

2014-12-08 10:08 负责人:无分享

16 个回复

DCloud_UNI_CHB

你引用的css为什么会是这个地址？

<link href="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet"/>

另外，你的父页面代码很奇怪啊，为什么不使用subpages实现子页面呢？难道子页面的唯一作用就是为了实现popover？那就没必要了，在父页面中一样可以实现popover？

还有，子页面是完整覆盖父页面的？top、bottom都没设置？

1***@qq.com - 天下风云出我辈

我的解决办法是popover做成一个单独的webview.然后再做成父页面的子页面append进去。当然zIndex要设置的高一些。然后设置这个子页面background：transparent；高度宽度均为父页面100%

DCloud_UNI_CHB

必然被覆盖，此时popover应该写在子页面中，参考hello mui中popover示例，点击右上角图标；

killet (作者)

我有分两个页面啊，父页面调用子页面的popover，但是会覆盖，你看我上面的代码

killet (作者)

@DCloud_MUI_CHB
我有分两个页面啊，父页面调用子页面的popover，但是会覆盖，你看我上面的代码

killet (作者)

那个css的引用我复制代码的贴到这里自动变的。。。不过你说的top和bottom没设置，还真是这样，我设置了就显示了，谢谢了

killet (作者)

@DCloud_MUI_CHB
现在是能显示了，但又有问题啊，如果还有别的子页面存在，那么这个弹出菜单弹出的时候，会把这个子页面给覆盖掉，用创建子页面的方式也是会这样，还有按你说的在父页面创建弹出菜单，这个就刚好反过来，弹出菜单会被已经存在的子页面给档住

DCloud_UNI_CHB

不是很明白你描述的场景，最好有代码片段和对应的问题截图；若有完整测试工程代码，那是最好。

2014-12-08 15:35
killet (作者)

有代码啊，我在qq里q你，

2014-12-08 15:45
killet (作者)

26195503我的qq

2014-12-08 15:47
BubbleBeast

这个怎么解决的，我也遇到popover的菜单被子页面webview挡住，一头雾水

2015-01-05 12:43

gq_long

弱弱的问下，为什么我试之后，只弹出一次，在点击就没有反应

Mars_Zhong

@DCloud_MUI_CHB 这个遮挡的问题有没有完整的示例啊,求解决,谢谢

简小单

请问你解决了吗？我也遇到这个问题了，我就想做类似支付宝右上角的加号一个的功能，用WEBVIEW方式的选项卡貌似不生了，没招的话只能改为DIV的选项卡了，不用子页面了

2016-02-20 18:05
agilny007

请问你解决了吗？我也遇到这个问题了,求指教啊。。。

2017-03-29 18:08