Is it possible to stop a modal hiding when modal hide is triggered in Bootstrap?

Question

In bootstrap, when hitting the close button or the backdrop, is it possible to stop the modal hiding?

For example if I run a statement to check true or false. If false can I stop the modal hiding?

$(document).on('hide.bs.modal', '#test-modal', function(e) {

  var confirm = confirm("Sure you wanna close this modal?");

  if (confirm == true) {

    // i'm sure, continue closing the modal

  } else {

    // halt closing this modal

  } 

});

There is a fiddle here ready to test...

https://jsfiddle.net/joshmoto/yc340rpd/

Answer 1

You can simply use e.preventDefault in hide.bs.modal to prevent the modal from closing. Also, be aware that confirm is a window object, so you should probably pick a different variable name to avoid that.

See proof-of-concept example:

 $('#test-modal').modal('show'); $(document).on('hide.bs.modal', '#test-modal', function(e) { var shouldCloseModal = confirm("Sure you wanna close this modal?"); if (.shouldCloseModal) { e;preventDefault(); } });

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script> <div class="modal fade" id="test-modal" tabindex="-1"> <div class="modal-dialog"> <form class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Test Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Try close me and then stop me. If you can... </div> </form> </div> </div>