How to hide bootbox.js modals

Question

I want to hide all of my bootbox modals. I currently have 2 modal and after I click on Cancel, I want to hide the all other modals.

Here's my code:

$('#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',
            });
          }
        }
      });
    }
  }
});

});

What would be the syntax to hide bootbox modals(All modals)?

Have you tried the [Bootstap events](https://getbootstrap.com/docs/4.0/components/modal/#events)? Maybe that works. — Louys Patrice Bessette, Jul 30 '18 at 03:30
`bootbox.hideAll();`. As noted in the [documentation](http://bootboxjs.com/documentation.html#bb-public-functions). — Tieson T., Aug 04 '18 at 05:18

score 2 · Answer 1 · edited Nov 20 '19 at 19:47

2

You should use next method:

bootbox.hideAll();

Documentation reference: http://bootboxjs.com/documentation.html#bb-function-hideAll

edited Nov 20 '19 at 19:47

Vitalii Chmovzh

2,825
4
14
28

answered Nov 20 '19 at 17:51

Edgar Mejía

119
1
9

score 1 · Answer 2 · answered Jul 30 '18 at 03:23

1

$('.bootbox.modal').modal('hide') should do the trick for you

answered Jul 30 '18 at 03:23

cdoshi

2,772
1
13
20

Should i put it on cancel? – Yettt Jul 30 '18 at 03:24
You must be triggering some sort of callback on click of cancel. Put this in there. So when you click cancel, the modal would be hidden as you want – cdoshi Jul 30 '18 at 03:25
Like this? cancel: { label: 'Cancel', callback:function(){$('.bootbox.modal').modal('hide');} } – Yettt Jul 30 '18 at 03:27
Yes, also attach the relevant class name that would identify the cancel button – cdoshi Jul 30 '18 at 03:30
i did cancel: { label: 'Cancel', className: "btn-sm btn-cancel", callback:function(){$('.bootbox.modal').hide('hide');} } – Yettt Jul 30 '18 at 03:38
Can you confirm if your callback is being triggered? If not, that is the source of the issue. In className, can you have just one class for now and check if that works – cdoshi Jul 30 '18 at 03:39

How to hide bootbox.js modals

2 Answers2