Ich benutze die Twitter Bootstrap lib für ein neues Projekt und möchte, dass ein Teil der Seite die neuesten Json-Daten zum modalen Schließen aktualisiert und abruft. Ich sehe das nirgendwo in der Dokumentation, kann mir 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 diese beim Laden der Seite nicht angezeigt wird und somit zweimal geladen würde
selbst wenn ich die Hide-Klasse entferne und die Element-ID auf display:none
setze und console.log("THE MODAL CLOSED");
zur Funktion oben hinzufüge, wenn ich auf close klicke, passiert nichts.
$('#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
$('#myModal').on('hidden', function () {
// do something…
})
Siehe getbootstrap.com/2.3.2/javascript.html#modals → Ereignisse
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
});
In diesem JSFiddle finden Sie ein Arbeitsbeispiel:
http://jsfiddle.net/aq9Laaew/120440/
Siehe den Abschnitt "Modal Events" der Dokumente hier:
Starten von Bootstrap 3 (edit: ist noch immer in Bootstrap 4 gleich). Es gibt zwei Fälle, in denen Sie Ereignisse starten können, und zwar:
$('#myModal').on('hide.bs.modal', function () {
console.log('Fired at start of hide event!');
});
$('#myModal').on('hidden.bs.modal', function () {
console.log('Fired when hide event has finished!');
});
Anstelle von "live" müssen Sie das Ereignis "on" verwenden, aber dem Dokumentobjekt zuweisen:
Benutzen:
$(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 Ereignisse bereitstellen, die Sie in modal einhängen können, z. B. wenn Sie ein Ereignis auslösen möchten wenn das Modal für den Benutzer nicht mehr angezeigt wird Verwenden Sie hidden.bs.modal event
/* hidden.bs.modal event example */
$('#myModal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Überprüfen Sie eine funktionierende Geige hier Lesen Sie mehr über modale Methoden und Ereignisse hier in Dokumentation
Ich habe viele Antworten zu den Bootstrap-Ereignissen gesehen, wie hide.bs.modal
, die ausgelöst werden, wenn der Modal geschlossen wird.
Es gibt ein Problem mit diesen Ereignissen: Alle Popups im Modal (Popovers, QuickInfos usw.) lösen dieses Ereignis aus.
Es gibt eine andere Möglichkeit, das Ereignis abzufangen, wenn ein Modal geschlossen wird.
$(document).on('hidden','#modal:not(.in)', function(){} );
Bootstrap verwendet die in
-Klasse, wenn das Modal geöffnet ist ..__ Es ist sehr wichtig, das hidden
-Ereignis zu verwenden, da die Klasse in
noch definiert ist, wenn das Ereignis hide
ausgelöst wird.
Diese Lösung funktioniert in IE8 nicht, da IE8 den Jquery :not()
-Selektor nicht unterstützt.
Bootstrap 4:
$('#myModal').on('hidden.bs.modal', function (e) {
// call your method
})
hide.bs.modal : Dieses Ereignis wird sofort ausgelöst, wenn die Instanzmethode hide eingeblendet wurde.
hidden.bs.modal : Dieses Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer sichtbar ist (wird warten, bis die CSS-Übergänge abgeschlossen sind).
Ich hatte die gleichen Probleme wie manche
$('#myModal').on('hidden.bs.modal', function () {
// do something… })
Sie müssen dies am unteren Rand der Seite platzieren. Wenn Sie es oben platzieren, wird das Ereignis niemals ausgelöst.
Ich springe hier sehr spät, aber für Leute, die Bootstrap-Modals mit React verwenden, habe ich MutationObserver verwendet, um Änderungen in der Sichtbarkeit eines Modals zu erkennen und den Status entsprechend anzupassen der modal ist geschlossen:
//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 Unterstützung moderner Browser wundern, hat CanIUse die Abdeckung 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 - on method