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

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 添加评论 分享
已邀请:

最佳回复

0

DCloud_客服_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>
\n
0

風水大師

赞同来自:

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


要回复问题请先登录注册