jquery - large - tamaño de ventana modal bootstrap
Vincular una función a Twitter Bootstrap Modal Cerrar (11)
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
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.
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í:
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!'');
});
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).
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
});
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.
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
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() .
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
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
$(document.body).on(''hidden.bs.modal'', function () {
$(''#myModal'').removeData(''bs.modal'')
});