jquery - ejemplos - ¿Cómo manejar el evento de cierre modal en Twitter Bootstrap?

modal html

Question

En Twitter bootstrap, mirando la documentación modals . No pude averiguar si hay una forma de escuchar el evento cerrado del modal y ejecutar una función.

Por ejemplo, tomemos este modal como ejemplo:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

El botón X en la parte superior y el botón cerrar en la parte inferior pueden ocultar / cerrar el modal debido a data-dismiss="modal" . Entonces me pregunto si podría escuchar eso de alguna manera.

Alternativamente, podría hacerlo manualmente así, supongo ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal(''show''); 
     $(this).find(".close_link").click(modal_closing);
});

¿Qué piensas?

Answer 1

Actualizado para Bootstrap 3

La documentación de Bootstrap 3 se refiere a dos eventos que puede usar

hide.bs.modal : este evento se dispara inmediatamente cuando se ha llamado al método de la instancia hide.
hidden.bs.modal : este evento se activa cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS).

Y proporciona un ejemplo sobre cómo usarlos:

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

Legacy Bootstrap 2.3.2 respuesta

La documentación de Bootstrap se refiere a dos eventos que puede usar

hide : este evento se dispara inmediatamente cuando se ha llamado al método hide de instancia.
hidden : este evento se activa cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones css).

Y proporciona un ejemplo sobre cómo usarlos:

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

Answer 2

Hay dos pares de eventos modales, uno es "show" y "shown", el otro es "hide" y "hidden". Como puede ver en el nombre, oculte los incendios de eventos cuando modal es acerca de estar cerca, como hacer clic en la cruz en la esquina superior derecha o cerrar el botón, etc. Mientras está oculto se dispara después de que el modal esté realmente cerca. Puedes probar estos eventos tú mismo. Por ejemplo:

$( ''#modal'' )
   .on(''hide'', function() {
       console.log(''hide'');
   })
   .on(''hidden'', function(){
       console.log(''hidden'');
   })
   .on(''show'', function() {
       console.log(''show'');
   })
   .on(''shown'', function(){
      console.log(''shown'' )
   });

Y, en cuanto a su pregunta, creo que debería escuchar el evento ''ocultar'' de su modal.

Answer 3

Si su div modal se agrega dinámicamente, utilice (Para bootstrap 3)

$(document).on(''hide.bs.modal'',''#modal-id'', function () {
                alert('''');
 //Do stuff here
});

Esto funcionará para contenido no dinámico también.