jQuery 禁止关闭 Twitter Bootstrap 模式窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9894339/
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
Disallow Twitter Bootstrap modal window from closing
提问by user1296175
I am creating a modal window using Twitter Bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close the modal window when clicking outside the modal.
我正在使用 Twitter Bootstrap 创建一个模态窗口。默认行为是，如果您在模态区域外单击，模态将自动关闭。我想禁用它——即在模态外单击时不关闭模态窗口。
Can someone share jQuery code to do this?
有人可以分享 jQuery 代码来做到这一点吗？
回答by Nobita
I believe you want to set the backdrop valueto static. If you want to avoid the window to close when using the Esckey, you have to set another value.
我相信您想将背景值设置为static。如果您想避免使用该Esc键时窗口关闭，则必须设置另一个值。
Example:
例子：
<a data-controls-modal="your_div_id"
data-backdrop="static"
data-keyboard="false"
href="#">
OR if you are using JavaScript:
或者，如果您使用的是 JavaScript：
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
回答by Nirmal
Just set the backdropproperty to 'static'.
只需将backdrop属性设置为'static'.
$('#myModal').modal({
backdrop: 'static',
keyboard: true
})
You may also want to set the keyboardproperty to falsebecause that prevents the modal from being closed by pressing the Esckey on the keyboard.
您可能还想将该keyboard属性设置为，false因为这样可以防止通过按下Esc键盘上的键来关闭模式。
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
myModalis the ID of the div that contains your modal content.
myModal是包含模态内容的 div 的 ID。
回答by Varun Chatterji
You can also include these attributes in the modal definition itself:
您还可以在模态定义本身中包含这些属性：
<div class="modal hide fade" data-keyboard="false" data-backdrop="static">
回答by AymKdn
If you already have initialized the modal window, then you may want to reset the options with $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})to make sure it will apply the new options.
如果您已经初始化了模态窗口，那么您可能需要重置选项$('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false})以确保它将应用新选项。
回答by Sam Jha
Override the Bootstrap ‘hide' event of Dialog and stop its default behavior (to dispose the dialog).
覆盖 Dialog 的 Bootstrap 'hide' 事件并停止其默认行为（以处理对话框）。
Please see the below code snippet:
请看下面的代码片段：
$('#yourDialogID').on('hide.bs.modal', function(e) {
e.preventDefault();
});
It works fine in our case.
在我们的情况下它工作正常。
回答by Satish Singh
Yes, you can do it like this:
是的，你可以这样做：
<div id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
data-backdrop="static" data-keyboard="false">
回答by CBarr
Kind of like @AymKdn's answer, but this will allow you to change the options without re-initializing the modal.
有点像@AymKdn 的回答，但这将允许您更改选项而无需重新初始化模态。
$('#myModal').data('modal').options.keyboard = false;
Or if you need to do multiple options, JavaScript's withcomes in handy here!
或者，如果您需要执行多个选项，JavaScriptwith在这里会派上用场！
with ($('#myModal').data("modal").options) {
backdrop = 'static';
keyboard = false;
}
If the modal is already open, these options will only take effect the next timethe modal is opened.
如果模态已经打开，这些选项只会在下次打开模态时生效。
回答by Vivek
Just add these two things
只需添加这两个东西
data-backdrop="static"
data-keyboard="false"
It will look like this now
现在看起来像这样
<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
It will disable the escape button and also the click anywhere and hide.
它将禁用转义按钮以及单击任意位置并隐藏。
回答by Eric B
You can disable the background's click-to-close behavior and make this the default for all your modals by adding this JavaScript to your page (make sure it is executed after jQuery and Bootstrap JS are loaded):
您可以通过将此 JavaScript 添加到您的页面（确保它在 jQuery 和 Bootstrap JS 加载后执行）来禁用背景的单击关闭行为并使其成为所有模式的默认值：
$(function() {
$.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});
回答by Morgan RotaStabelli
As D3VELOPER says, the following code resolve it:
正如 D3VELOPER 所说，以下代码解决了它：
$('#modal').removeData('bs.modal').modal({backdrop: 'static', keyboard: false});
I'm using both jquery & bootstrap and simply removeData('modal')don't work.
我同时使用 jquery 和引导程序，removeData('modal')但根本不起作用。
