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:none
und console.log("THE MODAL CLOSED");
die obige Funktion hinzufüge , wenn ich auf Schließen drücke, passiert nichts.
quelle
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.$('#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.Bootstrap 4
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
quelle
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
2. Wenn das modale "Verstecken" -Ereignis beendet ist
Ref: http://getbootstrap.com/javascript/#js-events
quelle
Anstelle von "live" müssen Sie das Ereignis "on" verwenden, es jedoch dem Dokumentobjekt zuweisen:
Verwenden:
quelle
quelle
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
Überprüfen Sie eine funktionierende Geige hier. Weitere Informationen zu modalen Methoden und Ereignissen finden Sie hier in der Dokumentation
quelle
Bootstrap 4:
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).
quelle
Ich würde es so machen:
Der Rest wurde bereits von anderen geschrieben. Ich empfehle auch, die Dokumentation zu lesen: jquery - on Methode
quelle
Ich habe viele Antworten zu den Bootstrap-Ereignissen gesehen, z. B.
hide.bs.modal
welche 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.
Bootstrap verwendet die
in
Klasse, wenn das Modal geöffnet ist. Es ist sehr wichtig, dashidden
Ereignis zu verwenden, da die Klassein
beimhide
Auslösen des Ereignisses noch definiert ist.Diese Lösung funktioniert in IE8 nicht, da IE8 den Jquery-
:not()
Selektor nicht unterstützt .quelle
Ich hatte die gleichen Probleme wie einige mit
Sie müssen dies unten auf der Seite platzieren. Wenn Sie es oben platzieren, wird das Ereignis nie ausgelöst.
quelle
$("#myModal")
aufgerufen wird, muss das HTML-Element mit der ID vonmyModal
im 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.Wenn Sie bei jedem Modalabschluss eine Funktion auslösen möchten, können Sie diese Methode verwenden:
Sie müssen also nicht jedes Mal modale IDs angeben.
quelle