How to catch event when user clicks outside of bootstrap modal dialog?

Question

Scenario :

1. I click on a button
2. Ajax call is made to the server
3. data is returned and modal is shown

Problem :

When user clicks on the close button or the "X" in the corner I catch this event by assigning a class to these two elements and assigning an event to this class.

Code :

$(document).on("click", ".dialogTankClose", function() {
    //some code
})

My problem is that i can't figure out how to catch when the user clicks outside of the dialog or presses "escape".

$(document).on("click", "modalCloseEvent",function(){
// how to catch this?
})

How can I catch this?

Answer 1

The Bootstrap modal raises an event when it closes, which you can hook to: hidden.bs.modal . This event fires no matter how the modal is closed. Try this:

$('#bootstrapModal').on("hidden.bs.modal", function() {
    $.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
        $.automation.tanks.tableInit();
    });
});

You can use a delegated event handler if the modal is dynamically added to the DOM:

$(document).on("hidden.bs.modal", '#bootstrapModal', function() {
    $.automation.worker.bindIntervalEvent("#TanksContent", "/Tank/GetTanks", function () {
        $.automation.tanks.tableInit();
    });
});

More information in the Bootstrap documentation

Answer 2

You can use 'hidden.bs.modal' modal method to run custom code while modal is getting unload / hide from document.

$('#your-modal-ID').on('hidden.bs.modal', function (e) {
  console.log("Hey !! I am unloading... ");
});