如何在使用自定义对话框时关闭bootbox？

Question

我正在使用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');

- Kokizzu

---

使用onEscape: function(){//callback}函数可以解决问题。在您提供的选项中，也给出这个并且只需说“return”即可。 onEscape: function(){return;} 完成http://bootboxjs.com/documentation.html - Ankur Verma

Answer 1

应该可以了。请注意，这仅在 v3 上使用 bootstrap 2.3.2 进行了测试。

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

- tibc-dev

Answer 2

添加一个onEscape回调函数，该函数可以为空。

请参考文档和示例。

基本代码：

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

- bart

---

适用于最新的4.x.x版本。 - croppio.com

onEscape: true足以。 - fabpico

这是问题的正确答案。 - ManoDestra

Answer 3

坦白说，我从来没有真正使用过模态框 - 它是很久以前的一个 PR，但我从未被其使用情况所说服。现在对你来说已经没有什么用了，但这种方法实际上被注释为在 v3.0.0 中已被弃用，并且可能会在将来的版本中被删除 - 它只是不太适合（对我来说） Bootbox 的创建目的，而其他方法已经被调整、改进和测试，它就有些被忽视了。

但你可以像这样做。

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

- Miomir Dancevic

Answer 4

对于那些想要在多个模态框打开时关闭单个bootbox模态框的人，我发现以下方法可以不破坏其他模态框：

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

- apc

Answer 5

我在这里尝试了其他答案，但它们对我没有用。我不确定这是否与我使用的特定版本的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);

- mwag

Answer 6

在版本3中，使用对话框时，只有在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>

- AndyS