云中陈
云中陈
  • 发布:2016-07-20 11:22
  • 更新:2016-07-23 08:46
  • 阅读:5308

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 分享
已邀请:

最佳回复

DCloud_UNI_Trust

DCloud_UNI_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

  • DCloud_UNI_Trust

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

    2016-07-20 14:03

  • 云中陈 (作者)

    @DCloud_UNI_Trust:还是会弹出窗体···如果点击空白地方,然后再点击单选按钮,就不会弹出窗体

    2016-07-20 14:32

  • 云中陈 (作者)

    @DCloud_UNI_Trust:可以了,你的代码木有问题啊!!!

    2016-07-20 15:04

風水大師

風水大師

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

要回复问题请先登录注册