Javascript 使用自定义对话框时如何关闭引导箱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26756500/
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
How to make bootbox closing when using custom dialog
提问by Kokizzu
I'm using bootboxto show dialog.
我正在使用引导箱来显示对话框。
If I use bootbox.confirm, bootbox.alertor bootbox.prompt, when pressing escapekey or clicking outside the dialog, the dialog closed as expected
如果我使用bootbox.confirm,bootbox.alert或bootbox.prompt，在按下escape键或在对话框外单击时，对话框会按预期关闭
but when using bootbox.dialog, when I click outside the dialog or pressing escapekey, the dialog doesn't close, how to make it behave as other dialog do?
但是在使用时bootbox.dialog，当我在对话框外单击或escape按键时，对话框不会关闭，如何使其表现得像其他对话框一样？
var box = bootbox.dialog({
show: false,
backdrop: true,
animate: false,
title: 'Bla',
message: 'bla bla bla',
buttons: {
cancel: {
label: 'Cancel',
className: 'btn-warning'
},
save: {
label: 'Parse',
className: 'btn-success',
callback: function () {
// handling with ajax
return false;
}
}
}
});
box.modal('show');
回答by tibc-dev
This should do it. Please note this has only been tested on v3. using bootstrap 2.3.2
这应该这样做。请注意，这仅在 v3 上进行过测试。使用引导程序 2.3.2
$(document).on('click', '.modal-backdrop', function (event) {
bootbox.hideAll()
});
回答by bart
Add an onEscapecallback function, which may have an empty body.
添加一个onEscape回调函数，它可能有一个空的主体。
See docs and example.
请参阅文档和示例。
Basic code:
基本代码：
bootbox.dialog({
onEscape: function() {},
// ...
});
回答by Miomir Dancevic
To be honest I've never really used modal - it came from a PR a long, long time ago but I've never been convinced of its use case. No good to you now but the method is actually commented as being deprecated in v3.0.0 and will probably actually be removed in future versions - it just doesn't really fit (to me) what Bootbox was created for and as other methods have been tweaked, improved and tested it's sat there somewhat neglected.
老实说，我从来没有真正使用过模态——它来自很久很久以前的 PR，但我从来没有相信它的用例。现在对您没有好处，但该方法实际上在 v3.0.0 中被评论为已弃用，并且实际上可能会在未来版本中被删除 - 它只是不适合（对我而言）Bootbox 的创建目的以及其他方法调整，改进和测试它坐在那里有点被忽视。
But you can do something like this
但是你可以做这样的事情
$(document).keyup(function(e) {
if (e.keyCode == 27) {box.modal("hide");} // esc
});
回答by AndyS
In version 3, with dialog, backdrop being true only works when onEscape is true as well - so you just need to set both to true, e.g.
在版本 3 中，对于对话框，背景为 true 仅在 onEscape 为 true 时才有效 - 所以您只需要将两者都设置为 true，例如
bootbox.dialog({message:'Message', title:'Title', backdrop:true, onEscape:true})<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>回答by mwag
I tried other answers here and they didn't work for me. I'm not sure if it had to do with the specific version of bootbox I was using or some other reason, but I just rolled my own solution to:
我在这里尝试了其他答案，但它们对我不起作用。我不确定这是否与我使用的特定版本的 bootbox 或其他原因有关，但我只是将自己的解决方案滚动到：
- only close the last modal that was opened (i.e. for nested modals, don't close all of them)
- selectively choose which modals will close on outside click and which will not
- work on all of the modal flavors (dialog, alert, confirm etc)
- not require me to change libraries or library versions
- 只关闭最后一个打开的模式（即对于嵌套模式，不要关闭所有模式）
- 有选择地选择哪些模态将在外部点击时关闭，哪些不会
- 处理所有模态风格（对话、警报、确认等）
- 不需要我更改库或库版本
by doing the following:
通过执行以下操作：
function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
d[0].addEventListener('click', function(e) {
if(e.target == d[0])
$(d).modal('hide');
e.stopImmediatePropagation();
return false;
});
}
which is used like so:
用法如下：
var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);
