Binden Sie eine Funktion an Twitter Bootstrap Modal Close
-
27-10-2019 - |
Frage
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.
Lösung
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
Andere Tipps
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:
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!');
});
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
});
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
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
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).
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 hide
wird ausgelöst.
Diese Lösung funktioniert nicht in IE8, da IE8 die JQuery nicht unterstützt :not()
Wähler.
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.
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
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