Twitter Bootstrap Modal - On hidden any

Question

I'm currently working on Bootstrap to put a video in a modal. Everything is generated via cms (so I dont have control on how much videos will be shown.)

Everything is going fine (I have to give each modal its own ID and everything works). Thing is, when you close the modal and the video is running, the video (and sound) continue to run in the background.

To dodge that, when a modal is closing with the x button, I refresh the html in the modal, like this:

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

My problem with that is that if the user clicks the backdrop, the Html won't reset. on the website of boostrap they call this

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

to monitor when one modal closes, but I want to find if there's a way to monitor when ANY modal closes.

Answer 1

Add a class to your modals and use that:

$('.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