使用mui('#set').popover('hide'); 隐藏了popover,但是背景阴影没有消失,要再点击屏幕一下才消失

分类：MUI

popover

使用mui('#set').popover('hide'); 隐藏了popover,但是背景阴影没有消失,要再点击屏幕一下才消失, 怎么办?
<body>
<header class="mui-bar mui-bar-nav" style="background-color: #48A0DC;">
<a class="mui-action-back mui-icon mui-pull-left"></a>
<h1 class="mui-title" id="title" style="color: white;">地图</h1>
<button class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-right" id="select-car" style="color: blue;">选择车辆</button>
<a href="#popover" class="mui-btn mui-btn-primary mui-btn-outlined mui-pull-left" id="set" style="color: blue;">设置</a>
</header>
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<h5 class="mui-content-padded">分类显示</h5>
<div class="mui-card" id="card">
<form class="mui-input-group" id="form1">
<div class="mui-input-row mui-radio">
<label>所有车辆</label>
<input name="radio1" type="radio" value="1">
</div>
<div class="mui-input-row mui-radio">
<label>在线车辆</label>
<input name="radio1" type="radio" value="2">
</div>
<div class="mui-input-row mui-radio">
<label>离线车辆</label>
<input name="radio1" type="radio" value="3">
</div>
</form>
</div>
<div class="mui-button-row" id="divb" style="margin:0px;">
<button class="mui-btn mui-btn-primary" id="sure" style="background-color: #48A0DC; width:30%; height: 40px;" href="#" onclick="">确定</button>  
<button class="mui-btn mui-btn-primary" id="cancel" style="background-color: #48A0DC; width:30%; height: 40px;" href="#" onclick="">取消</button>  
</div>
</ul>
</div>

        var rad = document.getElementsByName("radio1");  
        document.getElementById('sure').addEventListener('tap', function() {  
            if (rad[0].checked) {  
                loadmapdata1();  
            } else if (rad[1].checked) {  
                loadmapdata1(1);  
            } else if (rad[2].checked) {  
                loadmapdata1(0);  
            } else {  
                //alert(4);  
            }  
            mui('#set').popover('hide');  
                            //下面两种可以关闭阴影,但是偶数次点击就会关闭不了弹出框,  
            //mui('#popover').popover('hide');  
            //mui('.mui-popover').popover('toggle');  
        });  
        document.getElementById('cancel').addEventListener('tap', function() {  
            mui('#set').popover('hide');  
        });  
    });

2015-08-28 17:21 负责人:无分享

3 个回复

赵梦欢 - 专注前端，乐于分享！

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <style type="text/css">  
            .mui-popover{  
                position: fixed;  
                width: 80%;  
                height: auto;  
                border-radius: 0;  
                left: 50%;  
                top: 50%;  
                margin: 0 auto;  
                z-index: 9999;  
                background-color: #fff;  
                -webkit-transform: translateX(-50%) translateY(-50%);  
                -moz-transform: translateX(-50%) translateY(-50%);  
                -ms-transform: translateX(-50%) translateY(-50%);  
                transform: translateX(-50%) translateY(-50%);  
            }  
            .mui-popover-arrow{  
                display: none;  
            }  
        </style>  
    </head>  

    <body>    
        <div id="pop" class="mui-popover">  
            <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>  
            </ul>  
        </div>  

        <button id="openPopover" type="button" class="mui-btn mui-btn-blue mui-btn-block">打开弹出菜单</button>  

        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">   
            var pop = document.getElementById("pop");  
            var mask = mui.createMask(function(){  
                pop.classList.remove('mui-active');  
            });  

            // 显示  
            mui('#openPopover')[0].addEventListener('tap',function(){  
                mask.show();//显示遮罩  
                pop.classList.add('mui-active');  
            })  

            // 点击列表  
            mui('.mui-popover .mui-table-view').on('tap','li',function(){  
                pop.classList.remove('mui-active');  
                mask.close();  
            })  
        </script>  
    </body>  
</html>

gobbs

同遇到问题，这框架用的都心累了，文档里也不写怎样触发关闭，在论坛求助也没人理

l***@163.com

遇到同样的问题？请问你们解决了吗？

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

使用mui('#set').popover('hide'); 隐藏了popover,但是背景阴影没有消失,要再点击屏幕一下才消失

3 个回复

公告

相关问题

使用mui('#set').popover('hide'); 隐藏了popover,但是背景阴影没有消失,要再点击屏幕一下才消失

与内容相关的链接

3 个回复

公告

相关问题