it-swarm.com.de

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

In Twitter Bootstrap sehen Sie sich die Modals Dokumentation an. Ich konnte nicht herausfinden, ob es eine Möglichkeit gibt, das Close-Ereignis des Modals abzuhören und eine Funktion auszuführen.

z.B. Nehmen wir als Beispiel dieses Modal:

<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 beide das Modal wegen data-dismiss="modal" Verstecken/schließen. Also frage ich mich, ob ich das irgendwie anhö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 denkst du?

176
Houman

Aktualisiert für Bootstrap 3 und 4

Bootstrap und Bootstrap 4 Dokumente verweisen auf zwei Ereignisse, die Sie verwenden können.

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 für den Benutzer nicht mehr sichtbar ist (wartet auf CSS-Übergänge zu Komplett).

Und geben Sie ein Beispiel für deren Verwendung:

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

Legacy Bootstrap 2.3.2 answer

Dokumentation von Bootstrap verweist auf zwei Ereignisse, die Sie verwenden können.

hide : Dieses Ereignis wird sofort ausgelöst, wenn die Methode hide instance aufgerufen wurde.
hidden : Dieses Ereignis wird ausgelöst, wenn der Benutzer das Modal nicht mehr sehen kann (es wird gewartet, bis die CSS-Übergänge abgeschlossen sind).

Und liefert ein Beispiel, wie man sie benutzt:

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

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.

61
Confused

Es gibt zwei Paare von Modal Events, eines ist "show" und "shown", das andere ist "hide" und "hidden". Wie Sie aus dem Namen ersehen können, wird ein Ereignis ausgeblendet, wenn es um das Schließen des Modals geht, z. B. durch Klicken auf das Kreuz in der rechten oberen Ecke oder die Schaltfläche zum Schließen. Während versteckt wird abgefeuert, nachdem der Modal tatsächlich nahe 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, ich denke, Sie sollten sich das "Versteck" -Ereignis Ihres Modals anhören.

17
leo

Bootstrap-Modal-Ereignisse:

  1. hide.bs.modal => Tritt ein, wenn das Modal ausgeblendet werden soll.
  2. hidden.bs.modal => Tritt ein, wenn das Modal vollständig ausgeblendet ist (nachdem 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.

0
vishpatel73