Lega una funzione a Twitter Bootstrap Modal Close

Question

Sto usando Twitter Bootstrap Lib su un nuovo progetto e voglio che una parte della pagina aggiorni e recupera gli ultimi dati JSON su Modal Close. Non lo vedo da nessuna parte nella documentazione che qualcuno può indicarlo o suggerire una soluzione.

Due problemi con l'utilizzo dei metodi documentati

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

Allego già una classe "nascondi" al modale in modo che non venga visualizzato sul caricamento della pagina in modo che si carichi due volte

anche se rimuovo la classe nascondi e imposto l'ID elemento display:none e aggiungi console.log("THE MODAL CLOSED"); Alla funzione sopra quando colpisco vicino non succede nulla.

Answer 1

Bootstrap 3 e 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…
});

Vedere getbootstrap.com/2.3.2/javascript.html#modals → Eventi

Answer 2

Bootstrap 4

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

Vedi questo jsfiddle per un esempio funzionante:

https://jsfiddle.net/6n7bg2c9/

Vedi la sezione Eventi modale dei documenti qui:

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

Answer 3

Di partenza Bootstrap 3 (modificare: Sempre lo stesso in Bootstrap 4) Ci sono 2 casi in cui puoi attivare eventi, essendo:

1. Quando inizia l'evento modale "nascondi"

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

2. Quando l'evento modale "nascondi" è terminato

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

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

Answer 4

A proposito di "Live" devi usare "sull'evento", ma assegnalo all'oggetto documento:

Uso:

$(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

Bootstrap Fornisci eventi a cui puoi collegare modale, come se vuoi sparare a evento Quando il modale ha finito di essere nascosto dall'utente, è possibile utilizzare hidden.bs.modal Evento come questo

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

Controlla un lavoro violino qui Leggi di più su metodi motori ed eventi qui in Documentazione

Answer 7

Bootstrap 4:

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

Hide.bs.modal: Questo evento viene licenziato immediatamente quando è stato chiamato il metodo dell'istanza Hide.

hidden.bs.modal: Questo evento viene licenziato quando il modale ha finito di essere nascosto dall'utente (attende il completamento delle transizioni CSS).

Answer 8

Ho visto molte risposte sugli eventi bootstrap come hide.bs.modal che innesca quando il modale si chiude.

C'è un problema con quegli eventi: eventuali popup nel modale (popovers, tool otips, ecc.) Attiveranno quell'evento.

C'è un altro modo per catturare l'evento quando un modale si chiude.

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

Bootstrap usa il in classe quando il modale è aperto. È molto importante usare il hidden Evento dalla classe in è ancora definito quando l'evento hideè scatenato.

Questa soluzione non funzionerà in IE8 poiché IE8 non supporta il jQuery :not() selettore.

Answer 9

Stavo avendo gli stessi problemi di alcuni con

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

Devi posizionarlo nella parte inferiore della pagina, posizionandolo in cima non spara mai l'evento.

Answer 10

Sto saltando in super tardi qui, ma per le persone che usano i modali bootstrap con react che ho usato MutationObserver Per rilevare i cambiamenti nella visibilità di un modale e regolare lo stato di conseguenza: questo metodo potrebbe essere applicato per eseguire qualsiasi funzione quando il modale è chiuso:

//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
          });
        }
    });
}

Per coloro che si chiedono sul supporto del browser moderno, Caniuse ha la copertura di MutationObserver a circa l'87%

Spero che questo aiuti qualcuno :)

Saluti,

Jake

Answer 11

Lo farei in questo modo:

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

Il resto è già stato scritto da altri. Consiglio anche di leggere la documentazione:jQuery - sul metodo