jquery - large - tamaño de ventana modal bootstrap

Vincular una función a Twitter Bootstrap Modal Cerrar

Question

Estoy utilizando Twitter Bootstrap lib en un nuevo proyecto y quiero que parte de la página actualice y recupere los últimos datos de json en el cierre modal. No veo esto en ninguna parte de la documentación, alguien me lo puede indicar 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, por lo que se cargaría dos veces

incluso si elimino la clase de ocultación y configuro la identificación del elemento para display:none y agrego console.log("THE MODAL CLOSED"); a la función de arriba cuando golpeo cerca no pasa nada.

Answer 1

Bootstrap 3

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

Ver getbootstrap.com/javascript/#modals-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!'');
});

Ver este JSFiddle para un ejemplo de trabajo:

http://jsfiddle.net/aq9Laaew/120440/

Vea la sección de Eventos Modales de los documentos aquí:

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

Answer 3

Al iniciar Bootstrap 3 ( edición: sigue siendo el mismo en Bootstrap 4 ) hay 2 instancias en las que puede iniciar eventos, siendo:

1. Cuando se inicia el evento modal "hide"

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

2. Cuando finalizó el evento modal "hide"

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

Ref: http://getbootstrap.com/javascript/#js-events

Answer 4

Bootstrap 4:

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

hide.bs.modal : este evento se activa inmediatamente cuando se llama al método de instancia de ocultar.

hidden.bs.modal : este evento se activa cuando el modal ha terminado de ocultarse al usuario (esperará a que se completen las transiciones de CSS).

Answer 5

En lugar de "en vivo", debe usar el evento "on", pero asignarlo al objeto de documento:

Utilizar:

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

Answer 6

Estaba teniendo 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, colocándolo en la parte superior nunca dispara el evento.

Answer 7

Estoy saltando súper tarde aquí, pero para las personas que usan modales Bootstrap con React, 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 la compatibilidad con navegadores modernos, CanIUse tiene la cobertura de MutationObserver en un 87%

Espero que ayude a alguien :)

Aclamaciones,

Jake

Answer 8

He visto muchas respuestas con respecto a los eventos de arranque como hide.bs.modal que se dispara cuando se cierra el modal.

Hay un problema con esos eventos: cualquier ventana emergente en el modal (ventanas emergentes, 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 la clase cuando el modal está abierto. Es muy importante usar el evento hidden , ya que la clase in todavía se define cuando se activa la hide del evento.

Esta solución no funcionará en IE8 ya que IE8 no es compatible con el selector Jquery :not() .

Answer 9

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 método

Answer 10

Bootstrap proporciona eventos que puede enlazar en modal , como si desea activar un getbootstrap.com/javascript/#modals-usage cuando el modal haya terminado de ocultarse al usuario, puede usar el evento hidden.bs.modal como este

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

Consulte un violín en funcionamiento aquí. Lea más sobre métodos y eventos modales aquí en modal

Answer 11

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