Wie gehe ich mit dem modalen Abschlussereignis in Twitter Bootstrap um?

191

Schauen Sie sich im Twitter-Bootstrap die Modaldokumentation an . Ich konnte nicht herausfinden, ob es eine Möglichkeit gibt, das Abschlussereignis des Modals zu hören und eine Funktion auszuführen.

Nehmen wir zB dieses Modal als Beispiel:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

Die X-Taste oben und die Schließen-Taste unten können das Modal wegen ein- / ausblenden data-dismiss="modal". Also frage ich mich, ob ich das irgendwie hören könnte?

Alternativ könnte ich es auch manuell so machen, denke ich ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

Was denken Sie?

jquery twitter-bootstrap modal-dialog Houman
quelle
2
Mögliches Duplikat von Binden Sie eine Funktion an Twitter Bootstrap Modal Close
Salvador Dali

Antworten:

369

Aktualisiert für Bootstrap 3 und 4

Bootstrap 3- und Bootstrap 4- Dokumente beziehen sich auf zwei Ereignisse, die Sie verwenden können.

hide.bs.modal : Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide hide 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).

Und geben Sie ein Beispiel für deren Verwendung:

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

Legacy Bootstrap 2.3.2 Antwort

Die Dokumentation von Bootstrap bezieht sich auf zwei Ereignisse, die Sie verwenden können.

hide : Dieses Ereignis wird sofort ausgelöst, wenn die Methode "hide instance" aufgerufen wurde.
versteckt : Dieses Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist (wartet, bis die CSS-Übergänge abgeschlossen sind).

Und bietet ein Beispiel für deren Verwendung:

$('#myModal').on('hidden', function () {
    // do something…
})
Albertedevigo
quelle
1
Aus irgendeinem Grund wird dies für mich auch ausgelöst, wenn ich mit der Maus über eine Schaltfläche gehe, die ich im Modal habe. Und wenn ich ein Formular im Modal abschicke (noch bevor das onSubmit-Ereignis ausgelöst wird). Weiß jemand, wie man dieses Verhalten stoppt?
Guy
2
Um einen zusätzlichen Kontext bereitzustellen, würde ich empfehlen, $ (document) .on ('hidden', '#myModal', function () {// etwas tun}) zu verwenden. um zu verhindern, dass dies in bestimmten Situationen nicht funktioniert, z. B. wenn dies in einer Funktionsdeklaration $ (document) .ready enthalten ist.
Gareth Daine
hallo, ich möchte modal hidden jquery anwenden. und ich habe den gleichen Code in meinem Projekt angewendet, aber es funktioniert nicht. Haben Sie Vorschläge dafür?
Hardi Shah
@HardiShah, Sie sollten eine neue Frage stellen, einschließlich Ihres Codes und / oder Ihrer Fehler.
Albertedevigo
67

Wenn Ihr modales Div dynamisch hinzugefügt wird, verwenden Sie (Für Bootstrap 3)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

Dies funktioniert auch für nicht dynamische Inhalte.

Verwirrt
quelle
Unterschied zwischen verstecken und versteckt?
Mahi
3
Das Ereignis @mahi .hide wird sofort ausgelöst, wenn die Methode "hide instance" aufgerufen wurde. Das versteckte Ereignis wird ausgelöst, wenn das Modal nicht mehr für den Benutzer ausgeblendet ist (wartet, bis die CSS-Übergänge abgeschlossen sind).
Verwirrt
18

Es gibt zwei modale Ereignisse, eines ist "show" und "gezeigt", das andere ist "hide" und "hidden". Wie Sie dem Namen entnehmen können, können Sie Ereignisbrände ausblenden, wenn Modal in der Nähe ist, z. B. durch Klicken auf das Kreuz in der oberen rechten Ecke oder durch Schließen oder so weiter. Während versteckt wird ausgelöst, nachdem das Modal tatsächlich geschlossen ist. Sie können diese Ereignisse selbst testen. Zum Beispiel:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

Und was Ihre Frage betrifft, denke ich, dass Sie sich das "Verstecken" -Ereignis Ihres Modals anhören sollten.

Löwe
quelle
1

Modale Bootstrap-Ereignisse:

  1. hide.bs.modal => Tritt auf, wenn das Modal ausgeblendet werden soll.
  2. hidden.bs.modal => Tritt auf, wenn das Modal vollständig ausgeblendet ist (nachdem die CSS-Übergänge abgeschlossen wurden).
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

Ich hoffe das wird helfen.

vishpatel73
quelle