我是一个新手,所以我认为我在用twitter bootstrap模式监督一些事情(可能很明显)。我正在尝试做的是让一个模式只在移动设备上启动。在模式div上添加.visual-phone类可以很好地工作。到目前一切尚好。但是我想让它工作,这意味着你可以用X按钮关闭它。而且我也不能按下按钮。
<div class="modal visible-phone" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
在html的底部,我放入了jquery.js (第一个)、bootstrap.modal.js和bootstrap.transition.js。实际上所有的bootstrap js模块(不能错过一个include)。我没有使用js的经验。
如果我提出了一个非常愚蠢的问题,请原谅我。我在日志中找不到这个特定情况的答案。
发布于 2012-12-01 07:17:28
$('#myModal').modal('hide')
应该能做到
发布于 2012-05-17 01:17:16
如果使用以下命令打开引导模式对话框,我会遇到问题:
$('#myModal').modal('show');
我通过以下链接打开对话框解决了这个问题:
<a href="#myModal" data-toggle="modal">Open my dialog</a>
别忘了初始化:
$('#myModal').modal({show: false});
我还为关闭按钮使用了以下属性:
data-dismiss="modal" data-target="#myModal"
发布于 2012-05-08 21:55:03
尝试使用data-target精确地指定按钮应该关闭的模式。因此,您的按钮应如下所示-
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
此外,您应该只需要bootstrap.modal.js,这样就可以安全地删除其他代码。
编辑:如果这不起作用,那么删除visible-phone类,并在PC浏览器上测试它,而不是在手机上。例如,这将显示您是否收到javascript错误或是否存在兼容性问题。
编辑:演示代码
<html>
<head>
<title>Test</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
$("#myModal").modal("show");
}
$("#myModalClose").click(function () {
$("#myModal").modal("hide");
});
});
</script>
</head>
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<a class="close" id="myModalClose">×</a>
<h3>text introductory<br>want to navigate to...</h3>
</div>
<div class="modal-body">
<ul class="nav">
<li> ... list of links here </li>
</ul>
</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/10495421
复制相似问题