Binden Sie eine Funktion an Twitter Bootstrap Modal Close

Question

Ich verwende das Twitter Bootstrap Lib für ein neues Projekt und möchte einen Teil der Seite aktualisieren und die neuesten JSON -Daten zum Modal Close abrufen. Ich sehe das nirgendwo in der Dokumentation. Kann jemand es mir darauf hinweisen oder eine Lösung vorschlagen.

Zwei Probleme bei der Verwendung der dokumentierten Methoden

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

Ich füge bereits eine "Ausblenden" -Klasse an den Modal hinzu

Auch wenn ich die Klassenklasse ausblenden und die Element -ID auf festlegen display:none und hinzufügen console.log("THE MODAL CLOSED"); Zur Funktion oben, wenn ich schließen werde, passiert nichts passiert.

Answer 1

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

Sehen getbootstrap.com/2.3.2/javascript.html#modals → Ereignisse

Answer 2

Bootstrap 4

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

Sehen Sie sich dieses JSFIDDLE für ein Arbeitsbeispiel an:

https://jsfiddle.net/6n7bg2c9/

Siehe den Abschnitt "Modalereignisse" der Dokumente hier:

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

Answer 3

Beginnend Bootstrap 3 (bearbeiten: immer noch das gleiche in Bootstrap 4) Es gibt 2 Fälle, in denen Sie Ereignisse abfeuern können, da sie:

1. Wenn das Modal "Hide" -Event beginnt

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

2. Wenn das Modal "Hide" -Event endete

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

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

Answer 4

An der Stelle von "Live" müssen Sie "Ereignis" verwenden, aber es dem Dokumentobjekt zuweisen:

Verwenden:

$(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 Geben Sie Ereignisse an, an die Sie sich anschließen können modal, wie wenn du a feuern willst a Veranstaltung Wenn das Modal vor dem Benutzer versteckt ist, den Sie verwenden können versteckt.bs.modal Ereignis wie dieses

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

Überprüfen Sie eine Arbeit hier fummeln Lesen Sie mehr über Modalmethoden und -ereignisse hier in Dokumentation

Answer 7

Bootstrap 4:

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

hide.bs.modal: Dieses Ereignis wird sofort abgefeuert, wenn die Hide -Instanzmethode aufgerufen wurde.

versteckt.bs.modal: Dieses Ereignis wird abgefeuert, wenn das Modal vor dem Benutzer versteckt ist (es wartet, bis die CSS -Übergänge abgeschlossen sind).

Answer 8

Ich habe viele Antworten zu den Bootstrap -Ereignissen wie gesehen, z. hide.bs.modal was auslöst, wenn das Modal schließt.

Es gibt ein Problem mit diesen Ereignissen: Alle Popups im Modal (Popovers, Tooltips usw.) auslösen dieses Ereignis.

Es gibt eine andere Möglichkeit, das Ereignis zu fangen, wenn ein Modal schließt.

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

Bootstrap verwendet die in Klasse, wenn das Modal geöffnet ist. Es ist sehr wichtig, die zu verwenden hidden Ereignis seit der Klasse in ist immer noch definiert, wenn das Ereignis hidewird ausgelöst.

Diese Lösung funktioniert nicht in IE8, da IE8 die JQuery nicht unterstützt :not() Wähler.

Answer 9

Ich hatte die gleichen Probleme wie einige mit

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

Sie müssen dies am unteren Ende der Seite platzieren und es oben platzieren.

Answer 10

Ich springe hier super spät, aber für Leute, die Bootstrap -Modale mit React verwenden, habe ich verwendet MutationObserver Um Änderungen in der Sichtbarkeit eines Modals zu erkennen und den Zustand entsprechend anzupassen, kann diese Methode angewendet werden, um eine Funktion auszuführen, wenn das Modal geschlossen ist:

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

Für diejenigen, die sich über die moderne Browserunterstützung wundern, hat Caniuse die Berichterstattung von MutationObserver bei rund 87%

Hoffe das hilft jemandem :)

Prost,

Jake

Answer 11

Ich würde es so machen:

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

Der Rest wurde bereits von anderen geschrieben. Ich empfehle auch, die Dokumentation zu lesen:JQuery - auf Methode