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

191

En Twitter bootstrap, mirando la documentación de modals . No pude averiguar si hay una manera de escuchar el evento cercano 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 de cierre en la parte inferior pueden ocultar / cerrar el modal debido a data-dismiss="modal". Entonces, me pregunto, si de alguna manera podría escuchar eso.

Alternativamente, podría hacerlo manualmente de esta manera, supongo ...

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

¿Qué piensas?

jquery twitter-bootstrap modal-dialog Houman
fuente
2
posible duplicado de Bind a function to Twitter Bootstrap Modal Close
Salvador Dali

Respuestas:

369

Actualizado para Bootstrap 3 y 4

Los documentos Bootstrap 3 y Bootstrap 4 hacen referencia a dos eventos que puede usar.

hide.bs.modal : este evento se activa inmediatamente cuando se llama al método de instancia de 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 proporcione 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 hace referencia a dos eventos que puede usar.

hide : este evento se activa inmediatamente cuando se llama al método de instancia hide.
oculto : 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…
})
albertedevigo
fuente
1
Por alguna razón, esto también me está disparando cuando saco el mouse de un botón que tengo en el modal. Y cuando envío un formulario en el modal (incluso antes de que se active el evento onSubmit). ¿Alguien sabe cómo detener este comportamiento?
Guy
2
Para proporcionar un contexto adicional, recomendaría usar $ (document) .on ('hidden', '#myModal', function () {// do something}); para evitar que esto no funcione en ciertas situaciones, como cuando está contenido dentro de una declaración de función $ (document) .ready.
Gareth Daine
hola, quiero aplicar modal jquery oculto. y apliqué el mismo código en mi proyecto pero no funciona. ¿Tienes alguna sugerencia para lo mismo?
Hardi Shah, el
@HardiShah, debe hacer una nueva pregunta que incluya su código y / o errores.
albertedevigo
67

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 funcionará también para contenido no dinámico.

Confuso
fuente
diferencia entre ocultar vs oculto?
Mahi
3
El evento @mahi .hide se activa inmediatamente cuando se llama al método de instancia de hide. mientras que el evento oculto se activa cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones CSS).
Confundido el
18

Hay dos pares de eventos modales, uno es "mostrar" y "mostrar", el otro es "ocultar" y "ocultar". Como puede ver en el nombre, oculte los incendios de eventos cuando modal se trata de estar cerca, como hacer clic en la cruz en la esquina superior derecha o en el botón de cierre, etc. Mientras oculto se dispara después de que el modal esté realmente cerca. Puede probar estos eventos usted mismo. Para examen:

$( '#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 'hide' de su modal.

León
fuente
1

Eventos modales de Bootstrap:

  1. hide.bs.modal => Se produce cuando el modal está a punto de ocultarse.
  2. hidden.bs.modal => Se produce cuando el modal está completamente oculto (después de que se hayan completado las transiciones CSS).
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

Espero que esto sea de ayuda.

vishpatel73
fuente