Twitter Bootstrap Modal - Hidden

Question

I'm currently working on Bootstrap to put the video in modal. Everything is created using cms (so I can not control how much video will be shown.)

Everything is going well (I have to give each modal its own identifier, and everything works). The fact is that when you close the modal mode and the video works, the video (and sound) continue to work in the background.

To avoid this, when the modal is closed with the x button, I update the html in a modal format, for example:

$('button.close').click(function(){ var divcible=$(this).parent().parent().find(".modal-body"); var html = divcible.html() divcible.html("") divcible.html(html) }) 

My problem is that if the user clicks on the background, the HTML will not reset. on boostrap website they call it

 $('#myModal').on('hidden', function () { // do something… }) 

to track when one modal closes, but I want to find if there is a way to control when ANY modal closes.

Answer 1

Add a class to your modules and use this:

 $('.myModal').on('hidden', function () { // do something… // edit for clarity: "that" will now reference the modal that was hidden var that = this; }) 

Answer 2

 $('#myModal').on('hidden.bs.modal', function (e) { // do something... }) 

from bootstrap 3.x documentation http://getbootstrap.com/javascript/#modals

Answer 3

By default, most bubble events are up from the original target to the document element. This also applies to the hidden event, which fires when modal completion is hidden from the user. So the way to monitor when ANY modal closes is to attach an event handler to the document element as follows:

 $(document).on('hidden', function () { // a modal closes, so do what you want :) })