主页面加载子页面后，头部右边的编辑按钮不能弹出菜单，被子页面遮盖。怎么解决

分类：HTML5+

主页面加载子页面后，头部右边的编辑按钮不能弹出菜单，被子页面遮盖。怎么解决。z-index 试了不行。

代码：
<!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">  

    <link rel="stylesheet" href="http://ask.dcloud.net.cn/css/mui.min.css">  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  

        p {  
            text-indent: 22px;  
        }  

        span.mui-icon {  
            font-size: 14px;  
            color: #007aff;  
            margin-left: -15px;  
            padding-right: 10px;  
        }  

        .mui-off-canvas-left {  
            color: #fff;  
        }  

        .title {  
            margin: 35px 15px 10px;  
        }  

        .title .content {  
            margin: 10px 15px 35px;  
            color: #bbb;  
            text-indent: 1em;  
            font-size: 14px;  
            line-height: 24px;  
        }  

         #topPopover {  
            position: fixed;  
            top: 16px;  
            right: 6px;  
            z-index: 100;  
        }  
        #topPopover .mui-popover-arrow {  
            left: auto;  
            right: 6px;  
        }  
        .mui-popover {  
            height: 300px;  
        }  
    </style>  
</head>  

<body>  
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
        <!--侧滑菜单部分-->  
        <aside id="offCanvasSide" class="mui-off-canvas-left">  
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <div class="title"> </div>  
                    <div class="content" style="text-align: center;">  
                        <img src="http://pic.nzdb.com.cn/memberRegInfo_image/45f083c6-1126-4f22-8e0b-c0d38d635038.jpg" style="width:100px;height:100px;border-radius:100px" />  
                        <div class="title">XXX</div>  
                    </div>  

                    <!--<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>-->  
                    <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
                        <li class="mui-table-view-cell">  
                            <a class="mui-navigate-right">  
                                关于  
                            </a>  
                        </li>  
                        <li class="mui-table-view-cell">  
                            <a id='exit'>  
                                 退出   
                            </a>  
                        </li>  
                    </ul>  
                </div>  
            </div>  
        </aside>  
        <!--主界面部分-->  
        <div class="mui-inner-wrap">  
            <header class="mui-bar mui-bar-nav">  
                <a class="mui-action-back mui-btn mui-btn-link mui-pull-right"     href="#topPopover">操作</a>  
                <h1 class="mui-title">文章列表</h1>  
            </header>  
             <div class="mui-content"></div>  
        </div>  
    </div>  
    <!--右上角弹出菜单-->  
    <div id="topPopover" class="mui-popover" style="z-index: 999 !important;">  
        <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>  

                </ul>  
            </div>  
        </div>  

    </div>  
    <script src="js/mui.min.js"></script>  
    <script>  
        //启用双击监听  
    mui.init({  
        gestureConfig:{  
            doubletap:true  
        },  
        subpages:[{  
            url:'pullrefresh_sub.html',  
            id:'pullrefresh_sub.html',  
            styles:{  
                top: '45px',  
                bottom: '0px',  
                zindex:'0px'  
            }  
        }]  
    });  

    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元素  
        });  
         //批量操作  
    /*document.getElementById('bathOperator').addEventListener('tap', function() {  

        return;  
              mui.confirm('是否确认此操作？', null, ['否', '是'], function(e) {  
                if (e.index == 1) {  
                    }  
            });  
        }, false);*/  
        //退出操作******************  
        document.getElementById('exit').addEventListener('tap', function() {  
            if (mui.os.ios) {  
                app.setState({});  
                mui.openWindow({  
                    url: 'login.html',  
                    id: 'login',  
                    show: {  
                        aniShow: 'pop-in'  
                    },  
                    waiting: {  
                        autoShow: false  
                    }  
                });  
                return;  
            }  
            var btnArray = [{  
                title: "注销当前账号"  
            }, {  
                title: "直接关闭应用"  
            }];  
            plus.nativeUI.actionSheet({  
                cancel: "取消",  
                buttons: btnArray  
            }, function(event) {  
                var index = event.index;  
                switch (index) {  
                    case 1:  
                        app.setState({});  
                        mui.openWindow({  
                            url: 'login.html',  
                            id: 'login',  
                            show: {  
                                aniShow: 'pop-in'>   
                            },  
                            waiting: {  
                                autoShow: false  
                            }  
                        });  
                        break;  
                    case 2:  
                        plus.runtime.quit();  
                        break;  
                }  
            });  
        }, false);  
    </script>  
</body>

</html>

2016-04-21 17:19 负责人:无分享