使用自定义对话框时如何关闭引导箱答案

【问题标题】：How to make bootbox closing when using custom dialog使用自定义对话框时如何关闭引导箱
【发布时间】：2014-11-05 11:48:20
【问题描述】：

我正在使用bootbox 来显示对话框。

如果我使用bootbox.confirm、bootbox.alert 或bootbox.prompt，当按下escape 键或在对话框外单击时，对话框按预期关闭

但是在使用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');

【问题讨论】：

你可以使用 onEscape: function(){//callback } 来完成你给的选项，也给这个，然后在那个 onEscape: function(){返回;}完成bootboxjs.com/documentation.html

标签： javascript twitter-bootstrap-3 modal-dialog bootbox

【解决方案1】：

应该这样做。请注意，这仅在 v3 上进行了测试。使用引导程序 2.3.2

$(document).on('click', '.modal-backdrop', function (event) {
    bootbox.hideAll()
});

【讨论】：

【解决方案2】：

添加一个onEscape 回调函数，它可能有一个空的主体。

见docs and example。

基本代码：

bootbox.dialog({
   onEscape: function() {},
   // ...
});

【讨论】：

适用于最新的 4.x.x 版本
onEscape: true 就足够了。

【解决方案3】：

老实说，我从来没有真正使用过 modal——它来自很久很久以前的 PR，但我从未相信它的用例。现在对您没有好处，但该方法实际上在 v3.0.0 中被评论为已弃用，并且可能实际上会在未来的版本中被删除 - 它只是不适合（对我而言）Bootbox 的创建目的以及其他方法经过调整、改进和测试，它坐在那里有点被忽视了。

但是你可以这样做

$(document).keyup(function(e) {
  if (e.keyCode == 27) {box.modal("hide");}   // esc
});

【讨论】：

【解决方案4】：

对于那些希望在打开多个模式时关闭单个引导框模式的人，我发现以下方法可以在不破坏其他模式的情况下工作：

dialog.find(".bootbox-close-button").trigger("click");

【讨论】：

【解决方案5】：

在版本 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>

【讨论】：

【解决方案6】：

我在这里尝试了其他答案，但它们对我不起作用。我不确定这是否与我使用的特定版本的 bootbox 或其他原因有关，但我只是推出了自己的解决方案：

只关闭最后打开的模态框（即对于嵌套模态框，不要全部关闭）
有选择地选择哪些模式会在外部点击时关闭，哪些不会
处理所有模式风格（对话、警报、确认等）
不需要我更改库或库版本

通过执行以下操作：

function hideDialogOnOutsideClick(d) { // d = bootbox.dialog(...)
  d[0].addEventListener('click', function(e) {
    if(e.target == d[0])
      $(d).modal('hide');
    e.stopImmediatePropagation();
    return false;
  });
}

这样使用：

var d = bootbox.dialog(...) // or alert, confirm etc
hideDialogOnOutsideClick(d);

【讨论】：