Binden Sie eine Funktion an Twitter Bootstrap Modal Close

530

Ich verwende die Twitter Bootstrap-Bibliothek für ein neues Projekt und möchte, dass ein Teil der Seite die neuesten JSON-Daten beim modalen Schließen aktualisiert und abruft. Ich sehe das nirgendwo in der Dokumentation. Kann mich jemand 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 dem Modal bereits eine "hide" -Klasse hinzu, damit sie beim Laden der Seite nicht angezeigt wird, sodass sie zweimal geladen wird

Selbst wenn ich die Klasse hide entferne und die Element-ID auf setze display:noneund console.log("THE MODAL CLOSED");die obige Funktion hinzufüge , wenn ich auf Schließen drücke, passiert nichts.

BillPull
quelle

Antworten:

1138

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

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

Ricardo Lima
quelle
1
Dies scheint zu funktionieren, außer wenn es aus irgendeinem Grund über eine Schaltfläche in der modalen Fußzeile bewegt wird, wird es auch ausgelöst. Die Schaltfläche ist eine normale Senden-Schaltfläche: <input type = "submit" class = "btn btn-info" value = "Go" /> Haben Sie eine Idee, wie Sie das Ereignis "hide" nicht auslösen können, wenn Sie den Mauszeiger darüber halten? Oder wie kann ich feststellen, dass es wegen des Schwebefluges abgefeuert wurde? Übrigens: Obwohl das Ereignis ausgelöst wird, wird der modale Dialog nicht geschlossen.
Guy
2
Ich sehe dieses Verhalten bei Bootstrap 3 nicht. Können Sie eine Geige spielen?
sp00n
7
Diese Antwort sollte wahrscheinlich den Unterschied zwischen hidden.bs.modal und hide.bs.modal erwähnen. Hidden wird ausgelöst, wenn die CSS-Animationen abgeschlossen sind. Wenn jedoch in meinen Tests keine Animationen vorhanden sind, wird es nie ausgelöst (könnte jedoch nur ein Fehler sein). Wenn Sie mit Datenverwaltung arbeiten, ist es möglicherweise sicherer, stattdessen hide.bs.modal zu verwenden, das ausgelöst wird, sobald .modal ('hide') aufgerufen wird. getbootstrap.com/javascript/#modals-usage - Siehe Unterabschnitt Ereignisse.
Evan Steinkerchner
2
Bootstrap 3: Es funktioniert, wenn ich auf ein Modal-Tag klicke, das als data-dismiss="modal"(wie eine Schaltfläche zum Schließen) markiert ist , aber es funktioniert nicht, wenn ich auf den schwarzen Hintergrundbereich klicke, der das Modal umgibt. Das Modal wird verworfen, kann jedoch erst wieder geöffnet werden, wenn die Seite aktualisiert wurde. Ich habe beides versucht 'hidden.bs.modal'und 'hide.bs.modal'ohne Erfolg.
Marquito
5
@marquito Was Sie tun können (was ich tue), ist es wie folgt zu verwenden: Auf $('#myModal').modal({ backdrop: 'static', keyboard: false });diese Weise wird das Modal nicht geschlossen, wenn Sie auf einen grauen Bereich klicken oder die Esc-Taste drücken.
Aesede
123

Bootstrap 4

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

In dieser JSFiddle finden Sie ein funktionierendes Beispiel:

https://jsfiddle.net/6n7bg2c9/

Siehe den Abschnitt Modale Ereignisse in den Dokumenten hier:

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

aar0n
quelle
1
Für alle, die diesen Beitrag finden, um diese Art von Rückruf zu implementieren, gibt es ein Erweiterungsmodul für Bootstrap, das diese Funktionalität sowie viele andere hilfreiche Funktionen zum dynamischen Erstellen von Dialogen / Warnungen / Bestätigungen enthält: bootboxjs.com
jkriddle
@ Ricardo Limas Antwort unten ist jetzt die richtige Methode zum Überwachen von Ereignissen in jQuery / Bootstrap
Sbonami
@meatballs ist immer noch eine gute Stimme für das Arbeitsbeispiel. Auch wenn bind veraltet ist.
Stephen Patten
@ 100acrewood Dude, das ist ein Fund! Vielen Dank! re: bootboxjs.com
Stephen Patten
46

Beim Starten von Bootstrap 3 ( Bearbeiten: in Bootstrap 4 immer noch dasselbe ) gibt es zwei Instanzen, in denen Sie Ereignisse auslösen können:

1. Wenn das modale "Verstecken" -Ereignis beginnt

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

2. Wenn das modale "Verstecken" -Ereignis beendet ist

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

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

aesede
quelle
1
Dies hat mir geholfen, meinen Bootstrap-Modal-Fehler zu beheben, bei dem der Körper beim Schließen eines Modals um 15 Pixel Polsterung erweitert wurde. Vielen Dank!
Sam Malayek
2
Gut, um die 2 Ereignisse zu zeigen. Für Anfänger wie mich ist es besser zu beachten, dass dies unter dem Modal platziert werden muss, damit das Ereignis ausgelöst wird.
Lynnell Emmanuel Neri
18

Anstelle von "live" müssen Sie das Ereignis "on" verwenden, es jedoch dem Dokumentobjekt zuweisen:

Verwenden:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
Oscar
quelle
1
So müssen Sie es tun, wenn das Modal dynamisch hinzugefügt wird. Hat mir eine Menge Zeit gespart.
Dylan Vander Berg
15
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
SUNny.K
quelle
6

Bootstrap bietet Ereignisse, die Sie in Modal einbinden können.Wenn Sie beispielsweise ein Ereignis auslösen möchten,wenn das Modal nicht mehr für den Benutzer ausgeblendet ist, können Sie das Ereignis hidden.bs.modal wie folgt verwenden

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

Überprüfen Sie eine funktionierende Geige hier. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in der Dokumentation

Subodh Ghulaxe
quelle
4

Bootstrap 4:

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

hide.bs.modal : Dieses Ereignis wird sofort ausgelöst, wenn die Methode "hide instance" aufgerufen wurde.

hidden.bs.modal : Dieses Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist (wartet, bis die CSS-Übergänge abgeschlossen sind).

sendon1982
quelle
Dieser Weg gilt auch für BS3. Bitte beachten Sie die akzeptierte Antwort für BS2 (veraltet).
Roland
3

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 - on Methode

tkartas
quelle
2

Ich habe viele Antworten zu den Bootstrap-Ereignissen gesehen, z. B. hide.bs.modalwelche beim Schließen des Modals ausgelöst werden.

Bei diesen Ereignissen gibt es ein Problem: Popups im Modal (Popover, Tooltips usw.) lösen dieses Ereignis aus.

Es gibt eine andere Möglichkeit, das Ereignis zu erfassen, wenn ein Modal geschlossen wird.

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

Bootstrap verwendet die inKlasse, wenn das Modal geöffnet ist. Es ist sehr wichtig, das hiddenEreignis zu verwenden, da die Klasse inbeim hideAuslösen des Ereignisses noch definiert ist.

Diese Lösung funktioniert in IE8 nicht, da IE8 den Jquery- :not()Selektor nicht unterstützt .

Tortus
quelle
2

Ich hatte die gleichen Probleme wie einige mit

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

Sie müssen dies unten auf der Seite platzieren. Wenn Sie es oben platzieren, wird das Ereignis nie ausgelöst.

Michael Granger
quelle
Tatsächlich. Es ist gut, dass Sie erwähnt haben, dass es unterhalb des Modals platziert werden muss, um das Ereignis auszulösen.
Lynnell Emmanuel Neri
Ich würde die Regeln etwas strenger definieren. Wenn der jQuery-Selektor $("#myModal")aufgerufen wird, muss das HTML-Element mit der ID von myModalim DOM vorhanden sein. Sie können diesen Code also oben auf der Seite haben, aber innerhalb einer $(document).on("ready", function(){ ... });(oder einer ähnlichen Funktion, die aufgerufen wird, nachdem das DOM mit dem Element gefüllt wurde) platziert werden.
Andy Gee
0

Wenn Sie bei jedem Modalabschluss eine Funktion auslösen möchten, können Sie diese Methode verwenden:

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

Sie müssen also nicht jedes Mal modale IDs angeben.

Sahan
quelle