wake-up-neo.com

Binden Sie eine Funktion an Twitter Bootstrap Modal Close

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.

jquerymodal-dialogtwitter-bootstrap
457
BillPull

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

975
Ricardo Lima

Bootstrap 4

$('#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:

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

109
aar0n

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: 

1. Wenn das modale "hide" -Ereignis beginnt

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

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

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

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

42
aesede

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
});
14
Oscar
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
13
SUNny.K

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

6
Subodh Ghulaxe

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.

2
Tortus

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).

1
sendon1982

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.

1
Michael Granger

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

1
jacobedawson

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

0
tkartas