如何隐藏bootbox.js模态框

Question

我希望隐藏所有bootbox模态框。目前我有2个模态框，在点击取消后，我想要隐藏所有其他的模态框。

这是我的代码：

$('#table-grid').delegate(".requestBill", "click", function () { // store the checked checkbox ticket_id into array 
const prop_id = $(this).data('prop_id');
bootbox.prompt({
  title: "Request Bill",
  inputType: 'textarea',
  placeholder: 'Enter Additional Message',
  value: 'I am requesting an RPT Bill.',
  buttons: {
    confirm: {
      label: 'Submit'
    },
    cancel: {
      label: 'Cancel',


    }
  },
  callback: function (result) {
    if (result == null) {
      $.toast({
              heading: 'Note',
              text: 'Cannot request bill without describing reason(s)',
              icon: 'error',
              loader: false,
              stack: false,
              position: 'top-center',
              allowToastClose: false,
              bgColor: '#f0ad4e',
              textColor: 'white',
            });
    } else if (result == "") {
      $.toast({
              heading: 'Note',
              text: 'Cannot request bill without describing reason(s)',
              icon: 'error',
              loader: false,
              stack: false,
              position: 'top-center',
              allowToastClose: false,
              bgColor: '#f0ad4e',
              textColor: 'white',
            });


    } else {
      var fd = new FormData();
      fd.append("prop_id", prop_id);
      fd.append("content", result);
      $.ajax({
        type: "POST",
        url: base_url + "Main_declaration/request_bill",
        data: fd,
        contentType: false,
        cache: false,
        processData: false,
        beforeSend: function () {
          $(".requestBill").attr('disabled', true)
        },
        success: function (data) {
          if (data.success == 1) {
            $.toast({
              heading: 'Success',
              text: data.message,
              icon: 'success',
              loader: true,
              stack: false,
              position: 'top-center',
              allowToastClose: false,
              bgColor: '#5cb85c',
              textColor: 'white',
            });
          } else {
            $.toast({
              heading: 'Note',
              text: data.message,
              icon: 'error',
              loader: false,
              stack: false,
              position: 'top-center',
              allowToastClose: false,
              bgColor: '#f0ad4e',
              textColor: 'white',
            });
          }
        }
      });
    }
  }
});

如何隐藏bootbox模态框（所有模态框）的语法是什么？

});

- Yettt

---

你尝试过Bootstrap事件吗？也许那个可以。 - Louys Patrice Bessette

bootbox.hideAll();。根据文档所述。 - Tieson T.

Answer 1

您应该使用以下方法：

bootbox.hideAll();

文档参考：http://bootboxjs.com/documentation.html#bb-function-hideAll

该函数可以隐藏所有已经显示的 Bootbox 弹窗。这个函数没有参数，只需要调用它即可。

- Edgar Mejía

Answer 2

如果你想隐藏$('.bootbox.modal')，可以使用$('.bootbox.modal').modal('hide')

- cdoshi

---

我应该将其取消吗？ - Yettt

您必须在取消按钮单击时触发某种回调。将其放在那里。因此，当您单击取消时，模态框将会隐藏，正如您所希望的那样。 - cdoshi

像这样吗？取消：{ 标签：'取消', 回调函数：function（）{$（'.bootbox.modal'）。modal（'hide'）;}} - Yettt

是的，同时附上能够识别取消按钮的相关类名。 - cdoshi

我取消了: { 标签: '取消', 类名: "btn-sm btn-cancel", 回调函数:function(){$('.bootbox.modal').hide('hide');}} - Yettt

你能确认回调函数是否被触发了吗？如果没有，那么这就是问题的源头。在className中，现在只能有一个类，然后检查它是否有效。 - cdoshi