请教父webview 的popovers 被子 webview的类容遮住了，请教大神解惑，新手

分类：MUI

popover

源码，点导航栏上的“菜单”按钮，打开popovers,但被遮住了

<!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>  

    <link href="css/mui.min.css" rel="stylesheet" />  
    <style>  
        body {  
            background-color: #F6F6F6;  
        }  

        #topPopover {  
            position: fixed;  
            top: 16px;  
            right: 6px;  
        }  
        #topPopover .mui-popover-arrow {  
            left: auto;  
            right: 6px;  
        }  
        p {  
            text-indent: 22px;  
        }  
        span.mui-icon {  
            font-size: 14px;  
            color: #007aff;  
            margin-left: -15px;  
            padding-right: 10px;  
        }  
        .mui-popover {  
            height: 300px;  
        }  
        .mui-content {  
            padding: 10px;  
        }  
    </style>  

</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <h1 class="mui-title">【湘江钓鱼人】</h1>  
        <h1 class="mui-title">  
            <img src="images/myico.png" style="margin-left: 120px; margin-top: 5px;width: 30px;height: 30px;" />  
        </h1>  
        <a href="#topPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>  
    </header>  

    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="exa/shouye.html">  
            <span class="mui-icon mui-icon-chatbubble"><span class="mui-badge">5</span></span>  
            <span class="mui-tab-label">最新资讯</span>  
        </a>  
        <a class="mui-tab-item" href="exa/wdquanzi.html">  
            <span class="mui-icon mui-icon-pengyouquan"><span class="mui-badge">35</span></span>  
            <span class="mui-tab-label">我的圈子</span>  
        </a>  
        <a class="mui-tab-item" href="exa/faxian.html">  
            <span class="mui-icon mui-icon-search"><span class="mui-badge">15</span></span>  
            <span class="mui-tab-label">发现</span>  
        </a>  
        <a class="mui-tab-item" href="exa/me.html">  
            <span class="mui-icon mui-icon-contact"><span class="mui-badge">25</span></span>  
            <span class="mui-tab-label">我</span>  
        </a>  
    </nav>  

    <!--弹出菜单-->  
        <div id="topPopover" class="mui-popover">  
            <ul class="mui-table-view">  
                <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="#">Item的发生份10</a>  
                </li>  
            </ul>  
        </div>  

</body>  
<script src="js/mui.min.js"></script>  
<script src="js/app.js"></script>  
<script>  
    mui.init();  
     //     右上角弹出菜单  
    mui('body').on('shown', '.mui-popover', function(e) {  
        //console.log('shown', e.detail.id);//detail为当前popover元素  
    });  
    mui('body').on('hidden', '.mui-popover', function(e) {  
        //console.log('hidden', e.detail.id);//detail为当前popover元素  
    });  
     //分页导航  
    var subpages = ['exa/shouye.html', 'exa/wdquanzi.html', 'exa/faxian.html', 'exa/me.html'];  
    var subpage_style = {  
        top: '46px',  
        bottom: '50px'  
    };  
     //创建子页面，首个选项卡页面显示，其它均隐藏；  
    mui.plusReady(function() {  
        var self = plus.webview.currentWebview();  
        for (var i = 0; i < 4; i++) {  
            var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
            if (i > 0) {  
                sub.hide();  
            }  
            self.append(sub);  
        }  
    });  
     //当前激活选项  
    var activeTab = subpages[0];/////////////////////////////////  
     //var title = document.getElementById("title");  
     //选项卡点击事件  
    mui('.mui-bar-tab').on('tap', 'a', function(e) {  
        var targetTab = this.getAttribute('href');  
        if (targetTab == activeTab) {  
            return;  
        }  
        //更换标题  
        //title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
        //显示目标选项卡  
        plus.webview.show(targetTab);  
        //隐藏当前;  
        plus.webview.hide(activeTab);  
        //更改当前活跃的选项卡  
        activeTab = targetTab;  
    });  
     //自定义事件，模拟点击“首页选项卡”  
    document.addEventListener('gohome', function() {  
        var defaultTab = document.getElementById("defaultTab");  
        //模拟首页点击  
        mui.trigger(defaultTab, 'tap');  
        //切换选项卡高亮  
        var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
        if (defaultTab !== current) {  
            current.classList.remove('mui-active');  
            defaultTab.classList.add('mui-active');  
        }  
    });  
</script>

</html>

2015-04-15 18:08 负责人:无分享

4 个回复

DCloud_heavensoft

Hello mui里有样例，跨webview弹出popover。

sunnidy

右上角的是在header父页面调用的弹出，但是没找到代码。太深奥了。demo能否易懂一点，不要隐藏的太深。

2015-04-16 18:05
DCloud_heavensoft

回复 sunnidy: 其实就是一个webview通知另一个webview弹出popover，popover是写在下面的webview里的，上面的webview是通过webview通信通知下面的webview，让下面那个弹出菜单

2015-04-17 02:17
sunnidy

回复 DCloud_heavensoft:我自己写了个webview的html页面使用plus.webview.create(url,id,{},{}).show()将页面弹出来了，在第二个json参数里面将弹出页面设置成非全屏（也就是不覆盖div.mui-content)，然后自己在弹出的webview写了个遮罩层，效果是实现了，但是有以下三个问题：

1、我用的plus.webview.create(url,id,{},{}).show()，这个好像是预加载是不能传递参数给弹出页面的吧？如果要传递参数如何处理？

2、弹出webview的遮罩层，怎么设置透明？我找了公司的ui都没搞定，求教！

3、弹出页面的webview如何传递参数给父页面？难道也设置全局的js传递参数？

求教！

2015-04-17 23:03
DCloud_heavensoft

回复 sunnidy: webview之间的通信，使用evaljs方法，具体看webview的api。如果你用mui框架，可以参考这个文章，http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/63。弹出半屏webview这个招有点大材小用了，比较消耗性能。还是建议搞明白webview之间的通信方法，从父webview通知子webview激活显示popover

2015-04-17 23:17
DCloud_UNI_FXY

回复 sunnidy:childWebview.evalJS('mui("#topPopover").popover("toggle")');

2015-04-17 23:28

sunnidy - 984603

是下面这样吗？

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <script type='text/javascript' src="../js/jquery.min.js"> </script>  
        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
            /*此处定义弹出窗口的位置*/  
            #middlePopover{  
                position: fixed;  
                top: 69px;  
                right: 60px;  
            }  
            .mui-popover {  
                height: 300px;  
            }  
            .mui-content {  
                padding: 10px;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-footer">  
            <a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right">菜单</a>  
        </header>  
        <div class="mui-content">  
            <div class="mui-content-padded">  
                <!--触发弹出子窗口-->  
                <input type="button" value="弹出子窗口" onclick="popMenu()"/>  
            </div>  
        </div>  
        <div id="middlePopover" class="mui-popover">  
            <div class="mui-popover"></div>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <ul class="mui-table-view">  
                        <li class="mui-table-view-cell" onclick="abc(this)"><a href="#">Item1</a>  
                        </li>  
                        <li class="mui-table-view-cell"><a href="#">Item2</a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  
        <script>  
            mui.init();  
            mui('.mui-scroll-wrapper').scroll();  

            function popMenu () {  
                var i= 1;  
                //此处将父窗口的值带入子窗口  
                $('#middlePopover').find('a').each(function(){  

                    $(this).html(i);  
                    i=i+1;  
                });  
                //此处触发弹出窗口  
                mui('#middlePopover').popover('toggle');    
            }  

            function abc (obj) {  
                //此处将值传递到父窗口，改变父窗口的值  
                alert('你选择的是：'+$(obj).find('a').html());  
                //此处调用隐藏pop窗口  
                mui('#middlePopover').popover('toggle');    
            }  
        </script>  
    </body>  

</html>

小兜兜_咳咳

我也遇到了这个问题，请问您是怎么解决的？

CC22

wo ye yu daole

该问题目前已经被锁定, 无法添加新回复

请教父webview 的popovers 被子 webview的类容遮住了，请教大神解惑，新手

4 个回复

公告

相关问题

请教 父webview 的popovers 被子 webview的类容遮住了，请教大神解惑，新手

与内容相关的链接

4 个回复

公告

相关问题

请教父webview 的popovers 被子 webview的类容遮住了，请教大神解惑，新手