mui的modal能不能通过脚本控制

分类：MUI

mui

1、mui的modal能不能通过脚本控制开启
<input type="button" id="btnOk" value="确定" style="width: 100%; background: #EC971F; border: 1px solid #EC971F; color: #fff; float: left;" />
<a href="#modal" id="AAAA" class="">123</a>
当点击button的时候，触发弹窗功能，

2、我用<a href="#modal" id="AAAA" class="">123</a>触发弹窗时，关闭弹窗后，点击我页面上的单选框，会触发弹窗功能，这是什么情况
<input name="AAA" value="2" id="rbtDown" type="radio" />
<label for="rbtDown" style="display: inline;">test</label>

页面html大概如下面所示
<div class="mui-input-row mui-left mui-radio" style="height: 40px;">
<input name="AAA" value="2" id="rbtDown" type="radio" />
<label for="rbtDown" style="display: inline;">test</label>
</div>
<div class="module pay " style="border-top: 1px solid #ddd; padding: 10px; text-align: center;">
<input type="button" id="btnOk" value="确定" style="width: 100%; background: #EC971F; border: 1px solid #EC971F; color: #fff; float: left;" />
</div>
<a href="#modal" id="AAAA" class="">123</a>

2016-07-20 11:22 负责人:无分享

2 个回复

最佳回复

Trust - 少说废话

可以通过JS控制modal的class来实现展示和隐藏。
代码如下：

<!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" />  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">标题</h1>  
        </header>  
        <div class="mui-content">  
            <button type="button" class="mui-btn mui-btn-blue" id="btn">按钮</button>  
        </div>  
        <div class="mui-modal">  
            我是模态窗  
            <button type="button" class="mui-btn mui-btn-blue" id="modal_close">关闭</button>  
        </div>  
        <script src="../../js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                document.getElementById("btn").addEventListener("click", function() {  
                    document.querySelector(".mui-modal").classList.add("mui-active");  
                });  
                document.getElementById("modal_close").addEventListener("click", function() {  
                    document.querySelector(".mui-modal").classList.remove("mui-active");  
                });  
            });  
        </script>  
    </body>  

</html>

云中陈 (作者)

嗯··这个是可以得，但是我弹出窗体后，点击页面上的单选框按钮，还是会弹出窗体，这是怎么回事？

2016-07-20 13:57
Trust

回复云中陈:您换成这种JS控制的，就不会出现这种情况了。

2016-07-20 14:03
云中陈 (作者)

回复 Trust:还是会弹出窗体···如果点击空白地方，然后再点击单选按钮，就不会弹出窗体

2016-07-20 14:32
云中陈 (作者)

回复 Trust:可以了，你的代码木有问题啊！！！

2016-07-20 15:04

風水大師

我把百度地图的输入提示例子放到modal中，提示的列表显示不出来，放出去就可以，是因为什么？

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

mui的modal能不能通过脚本控制

2 个回复

公告

相关问题

mui的modal能不能通过脚本控制

与内容相关的链接

2 个回复

公告

相关问题