twitter-bootstrap Bootstrap 3 模式不会在外部点击时关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23783014/
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
Bootstrap 3 modal does not close on outside click
提问by jsduniya
I have created a modal using call,
我使用调用创建了一个模态，
$('#myModalContent').modal('show');
html is:
html是：
<div class=" modal fade" id="myModalContent" 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>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Problem is when i click outside the modal popup, its doesn't close. (its closes on esc)
问题是当我在模态弹出窗口之外单击时，它没有关闭。（它在 esc 上关闭）
采纳答案by jsduniya
I have written custom code to solve this.
我已经编写了自定义代码来解决这个问题。
$("body").on("click", ".modal-dialog", function(e) {
if ($(e.target).hasClass('modal-dialog')) {
var hidePopup = $(e.target.parentElement).attr('id');
$('#' + hidePopup).modal('hide');
}
});
回答by vijay
Just add data-backdrop="static"and data-keyboard="false"attributes to that modal (ie where you have class='modal')
只需添加data-backdrop="static"和data-keyboard="false"属性到该模式（即你有class='modal'）
data-backdrop="true"is the default behaviour that allows for background click dismissal and data-backdrop="static"is the behaviour that your explaining, no dismissal, so probably you have set it somewhere to "static".
data-backdrop="true"是允许后台点击关闭的默认行为，并且data-backdrop="static"是您解释的行为，没有关闭，因此您可能已将其设置为“静态”。
data-keyboard="false"is for not allowing ESC
data-keyboard="false"是为了不允许 ESC
回答by Vishal Kumar Verma
You can pass options to the modal as :
您可以将选项传递给模态：
$('#myModal').modal({
show:true,
backdrop:true,
keyboard:true
})
回答by Ambala Chandrashekar
//remove modal class from modal start div and
$('#MyModal').modal({ backdrop: false });
$('body').removeClass("modal-open");
回答by Vivekh
It should work if you are using bootstrap 3
<div class="modal fade bs-example-modal-sm" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Small Modal</h4>
</div>
<div class="modal-body">...</div>
</div>
</div>
</div>
and call it as call it as : $('#modalExample').modal();
并将其称为： $('#modalExample').modal();
