Atar una función a Twitter Bootstrap Modal Close

Question

Estoy usando el Twitter Bootstrap lib en un nuevo proyecto y quiero que parte de la página se actualice y recupere los últimos datos JSON en Modal Close. No veo esto en ninguna parte de la documentación, ¿alguien puede señalarme a mí o sugerir una solución?

Dos problemas con el uso de los métodos documentados

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

Adjunto una clase de "ocultar" al modal ya que no se muestra en la carga de la página para que eso se cargue dos veces

Incluso si elimino la clase de ocultación y configura la identificación del elemento en display:none y añadir console.log("THE MODAL CLOSED"); a la función anterior cuando llego a Cerrar no pasa nada.

Answer 1

Bootstrap 3 y 4

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

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getBootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

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

Ver getbootstrap.com/2.3.2/javascript.html#modals → Eventos

Answer 2

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

Vea este JSFIDDLE para un ejemplo de trabajo:

https://jsfiddle.net/6n7bg2c9/

Vea la sección de eventos modales de los documentos aquí:

https://getbootstrap.com/docs/4.3/components/modal/#events

Answer 3

Comenzando Bootstrap 3 (editar: sigue siendo lo mismo en Bootstrap 4) Hay 2 casos en los que puedes encender eventos, siendo:

1. Cuando comienza el evento modal "Ocultar"

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. Cuando termina el evento modal "Ocultar"

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Árbitro: http://getbootstrap.com/javascript/#js-events

Answer 4

En lugar del evento "Live" To To Using "on", pero asignarlo al objeto del documento:

Usar:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

Answer 5

$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

Answer 6

Oreja Proporcionar eventos en los que pueda engancharse modal, como si quieres disparar un evento Cuando el modal ha terminado de estar oculto al usuario, puede usar oculto.bs.modal evento como este

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

Verifique un trabajo violar aquí Lea más sobre métodos y eventos modales aquí en Documentación

Answer 7

Bootstrap 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

ocultar.bs.modal: Este evento se dispara inmediatamente cuando se ha llamado al método de instancia de ocultación.

oculto.bs.modal: Este evento se dispara cuando el modal ha terminado de estar oculto al usuario (esperará que se completen las transiciones CSS).

Answer 8

He visto muchas respuestas sobre los eventos de bootstrap como hide.bs.modal que se desencadena cuando se cierra el modal.

Hay un problema con esos eventos: cualquier ventana emergente en el modal (popovers, información sobre herramientas, etc.) activará ese evento.

Hay otra forma de atrapar el evento cuando se cierra un modal.

$(document).on('hidden','#modal:not(.in)', function(){} );

Bootstrap usa el in clase cuando el modal está abierto. Es muy importante usar el hidden evento desde la clase in todavía se define cuando el evento hidese activa.

Esta solución no funcionará en IE8 ya que IE8 no admite la jQuery :not() selector.

Answer 9

Tenía los mismos problemas que algunos con

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

Debe colocar esto en la parte inferior de la página, colocarlo en la parte superior nunca dispara el evento.

Answer 10

Estoy saltando súper tarde aquí, pero para las personas que usan modales de arranque con React que he estado usando Mutationobserver Para detectar cambios en la visibilidad de un modal y ajustar el estado en consecuencia, este método podría aplicarse para ejecutar cualquier función cuando el modal esté cerrado:

//react stuff
componentDidMount: function() {
    var self = this;
    $(function() {
        $("#example_modal").addClass('modal');
        //use MutationObserver to detect visibility change
        //reset state if closed
        if (MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            //use jQuery to detect if element is visible
            if (!$('#example_modal').is(':visible')) {
                //reset your state
                self.setState({
                    thingone: '',
                    thingtwo: ''
                });
            }
        });
        var target = document.querySelector('#example_modal');
            observer.observe(target, {
                attributes: true
          });
        }
    });
}

Para aquellos que se preguntan sobre el soporte moderno del navegador, Caniuse tiene la cobertura de MutationObserver en alrededor del 87%

Espero que eso ayude a alguien :)

Salud,

Jake

Answer 11

Lo haría así:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

El resto ya ha sido escrito por otros. También recomiendo leer la documentación:jQuery - en el método