Capture close event on Bootstrap Modal

Question

I have a Bootstrap Modal to select events. If the user clicks on the X button or outside the modal, I would like to send them to the default event. How can I capture these events?

This is my HTML code:

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content event-selector">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <center><h1 class="modal-title event-selector-text">Select an Event</h1><center>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                <div class="event-banner">
                    <a href="/?event=1">
                        <img src="<?php echo IMAGES_EVENT1_LOGO; ?>" width="100%">
                    </a>
                </div>
                <div class="event-banner">
                    <a href="/?event=2">
                        <img src="<?php echo IMAGES_EVENT2_LOGO; ?>" width="100%">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Solution 1

This is very similar to another stackoverflow article, Bind a function to Twitter Bootstrap Modal Close. Assuming you are using some version of Bootstap v3 or v4, you can do something like the following:

$("#myModal").on("hidden.bs.modal", function () {
    // put your default event here
});

Solution 2

Though is answered in another stack overflow question Bind a function to Twitter Bootstrap Modal Close but for visual feel here is more detailed answer.

Source: http://getbootstrap.com/javascript/#modals-events

Solution 3

I tried using it and didn't work, guess it's just the modal versioin.

Although, it worked as this:

$("#myModal").on("hide.bs.modal", function () {
    // put your default event here
});

Just to update the answer =)

Solution 4

catch close event in bootstrap 5, without jquery:

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})

Solution 5

This is worked for me, anyone can try it

$("#myModal").on("hidden.bs.modal", function () {
    for (instance in CKEDITOR.instances)
        CKEDITOR.instances[instance].destroy();
    $('#myModal .modal-body').html('');    
});

you can open ckEditor in Modal window

View more solutions

Comments

[sheshadri]

$(window).onclick() in javascript

[kmonsoor]

Possible duplicate of Bind a function to Twitter Bootstrap Modal Close

[Bruce Tompkins]

Sorry, since I first tried this and it worked 5 or 6 times in a row, I recompiled my application and am having the same problem again, the Please Wait modal stays displayed after modal('hide').

[Dani]

that works but how can I differentitate between normal close and a forced close? I have 2 buttons (OK, CANCEL). With cancel I close it from the template but with ok I need to close it first and do my stuff. What I need is a callback, not an event

[Iman Bahrampour]

It's works fine.