我非常喜欢菜鸟，所以我认为我正在用twitter bootstrap模式监督一些事情（可能很明显）。我想要做的是获得一个仅在移动设备上启动的模式。这样可以在模态div上添加类.visible-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模块（不要错过包含）。 我对js没有经验..
如果我提出了一个非常愚蠢的问题，请原谅我。我在日志中找不到这个具体情况的答案。
答案 0 :(得分：219)
$('#myModal').modal('hide')应该这样做
答案 1 :(得分：27)
关闭bootstrap模式对话框时遇到问题，如果用以下方式打开它：
$('#myModal').modal('show');
我解决了这个问题，通过以下链接打开对话框：
<a href="#myModal" data-toggle="modal">Open my dialog</a>
不要忘记初始化：
$('#myModal').modal({show: false});
我还使用了以下属性作为结束按钮：
data-dismiss="modal" data-target="#myModal"
答案 2 :(得分：13)
将课程隐藏添加到模态
<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >
Javascript代码
<!-- Use this to hide the modal necessary for loading and closing the modal-->
<script>
$(function(){
$('#closeModal').click(function(){
$('#myModal').modal('hide');
});
});
</script>
<!-- Use this to load the modal necessary for loading and closing the modal-->
<script>
$(function () {
$('#myModal').modal('show');
});
</script>
答案 3 :(得分：13)
.modal('hide')手动隐藏模态。使用以下代码关闭引导模型
$('#myModal').modal('hide');
看看工作codepen here
或者
试试这里
$(function () {
$(".custom-close").on('click', function() {
$('#myModal').modal('hide');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<a class="custom-close"> My Custom Close Link </a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
答案 4 :(得分：6)
尝试使用data-target准确指定按钮应关闭的模式。所以你的按钮应如下所示 -
<button class="close" data-dismiss="modal" data-target="#myModal">×</button>
此外，您应该只需要bootstrap.modal.js，这样您就可以安全地删除其他内容。
编辑：如果这不起作用，请删除可见电话类并在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>
答案 5 :(得分：5)
根据文档隐藏/切换应该工作。但它没有。
我是这样做的
$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body
答案 6 :(得分：3)
试试这个..
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
答案 7 :(得分：1)
我在iphone或桌面上遇到同样的问题，按下关闭按钮时没有设法关闭对话框。
我发现<button>标记定义了一个可点击按钮，需要指定一个元素的类型属性，如下所示：
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
检查引导模式的示例代码： BootStrap javascript Page
答案 8 :(得分：0)
如果同时显示的模态很少，您可以为属性为20000和data-toggle的in-modal按钮指定目标模态：
data-target在模态代码之外的某处，您可以使用另一个切换按钮：
<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title">Modal Title</h4>
<small>Modal Subtitle</small>
</div>
<div class="modal-body">
<p>Modal content text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
</div>
</div>
</div>
</div>
当隐藏这些按钮时，用户无法点击模态切换按钮，并且正确使用属性<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>
的选项"modal"。这个方案自动化了！
答案 9 :(得分：0)
这是一个片段，不仅可以关闭没有页面刷新的模态，但按下输入时会提交模态并关闭而不刷新
我已将它设置在我的网站上，我可以在提交时使用多个模态和一些模态处理数据，而有些则没有。我所做的是为每个进行处理的模态创建一个唯一的ID。例如，在我的网页中：
HTML（模态页脚）：
<div class="modal-footer form-footer"><br>
<span class="caption">
<button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button>
<button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a>
</span>
</div>
<强> JQUERY：
$(document).ready(function(){
// Allow enter key to trigger preloadorders form
$(document).keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(".trigger").is(".ok"))
$("#PreLoadOrders").trigger("click");
else
return;
}
});
});
正如你所看到的，这个提交执行处理，这就是为什么我有这个模式的jQuery。现在假设我在这个网页中有另一个模态，但没有执行任何处理，因为一次打开一个模态我将另一个$(document).ready()放在一个全局php / js脚本中，所有页面都得到了，我给了模态的关闭按钮一个名为".modal-close"的课程：
<强> HTML：
<div class="modal-footer caption">
<button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
jQuery（包括global.inc）：
$(document).ready(function(){
// Allow enter key to trigger a particular button anywhere on page
$(document).keypress(function(e) {
if(e.which == 13) {
if($(".modal").is(":visible")){
$(".modal:visible").find(".modal-close").trigger('click');
}
}
});
});