jQuery 关闭 Bootstrap 模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16493280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close Bootstrap Modal
提问by Nick B
I have a bootstrap modal dialog box that I want to show initially, then when the user clicks on the page, it disappears. I have the following:
我有一个引导模式对话框，我想最初显示它，然后当用户单击页面时，它就会消失。我有以下几点：
$(function () {
$('#modal').modal(toggle)
});
<div class="modal" id='modal'>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Error:</h3>
</div>
<div class="modal-body">
<p>Please correct the following errors:</p>
</div>
</div>
</div>
The modal is displayed initially, but it does not close when clicked outside of the modal. Also, the content area is not greyed out.. How can I get the modal to display initially, then close after the user clicks outside the area? And how can I get the background to be grayed out as in the demo?
模态最初显示，但在模态外单击时不会关闭。此外，内容区域没有变灰.. 我怎样才能让模态最初显示，然后在用户点击区域外后关闭？以及如何使背景像演示中一样变灰？
回答by Tamil Selvan C
Put modal('toggle')instead of modal(toggle)
将modal('toggle')代替modal(toggle)
$(function () {
$('#modal').modal('toggle');
});
回答by Subodh Ghulaxe
to close bootstrap modalyou can pass 'hide'as option to modal method as follow
要关闭引导模式，您可以将“隐藏”作为选项传递给模态方法，如下所示
$('#modal').modal('hide');
Please take a look at working fiddle here
bootstrap also provide events that you can hook into modalfunctionality, like if you want to fire a event when the modal has finished being hidden from the user you can use hidden.bs.modalevent you can read more about modal methods and events here in Documentation
bootstrap 还提供可以挂钩到模态功能的事件，例如，如果您想在模态完成对用户隐藏后触发事件，您可以使用hidden.bs.modal事件，您可以在此处阅读有关模态方法和事件的更多信息文档
If none of the above method work, give a id to your close button and trigger click on close button.
如果上述方法都不起作用，请为您的关闭按钮指定一个 id 并触发点击关闭按钮。
回答by Robert Benyi
$('#modal').modal('toggle');
or
或者
$('#modal').modal().hide();
should work.
应该管用。
But if nothing else works you can call the modal close button directly:
但如果没有其他效果，您可以直接调用模态关闭按钮：
$("#modal .close").click()
回答by santhosh
this worked for me:
这对我有用：
<span class="button" data-dismiss="modal" aria-label="Close">cancel</span>
use this link modal close
使用此链接模式关闭
回答by Yishai Landau
$("#your-modal-id").modal('hide');
Running this call via class ($(".my-modal"))won't work.
通过类运行此调用($(".my-modal"))将不起作用。
回答by Love Kumar
Try This
尝试这个
$('#modal_id').modal('hide');
回答by user3869304
this one is pretty good and it also works in angular 2
这个非常好，它也适用于角度 2
$("#modal .close").click()
回答by Andre Van Zuydam
My five cents on this one is that I don't want to have to target the bootstrap modal with an id and seeing as there should be only one modal at a time the following should be quite sufficient to remove the modal as toggle could be dangerous:
我对这个的 5 美分是我不想用 id 定位引导模式，因为一次应该只有一个模式，以下应该足以删除模式，因为切换可能很危险：
$('.modal').removeClass('show');
回答by zinczinc
In some circumstances typing error could be the culprit. For instance, make sure you have:
在某些情况下，输入错误可能是罪魁祸首。例如，请确保您有：
data-dismiss="modal"
and not
并不是
data-dissmiss="modal"
Notice the double "ss" in the second example that will cause the Close button that fail.
注意第二个例子中的双“ss”会导致关闭按钮失败。
回答by sher bahadur
$('.modal.in').modal('hide');
$('.modal.in').modal('hide');
use the above code to hide the backdrop of modal if you are using multiple modal pop in one page.
如果您在一页中使用多个模态弹出窗口，请使用上面的代码隐藏模态的背景。
