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

En Twitter bootstrap, mirando la documentación modals. No pude averiguar si hay una manera de escuchar el evento de cierre 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". Así que me pregunto si de alguna manera podría escuchar eso.

Alternativamente podría hacerlo manualmente así, Yo adivinar...

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

¿Qué piensas?

Author: akhilp2255, 2012-09-07
Source

3 answers

Actualizado para Bootstrap 3 y 4

Bootstrap 3 y Bootstrap 4 docs se refieren los dos eventos que puede utilizar.

Hide. bs. modal : Este evento se dispara inmediatamente cuando se llama al método hide instance.
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 proporcionar un ejemplo sobre cómo usarlos: 

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

Legado Bootstrap 2.3.2 respuesta

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

Hide : Este evento se activa inmediatamente cuando se llama al método hide instance.
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…
})
 280
Author: albertedevigo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-05 07:26:41

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

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

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

 55
Author: Confused,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-06 12:55:16

Hay dos pares de eventos modales, uno es "show" y "shown", el otro es "hide" y "hidden". Como puede ver en el nombre, ocultar eventos se dispara cuando modal está cerca de estar cerca, como hacer clic en la cruz en la esquina superior derecha o cerrar botón o así sucesivamente. Mientras 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.

 17
Author: leo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-30 15:25:18