Comment gérer l'événement de fermeture modale dans Twitter Bootstrap?

Dans le bootstrap de Twitter, en regardant la documentation des modaux . Je n'ai pas pu déterminer s'il existe un moyen d'écouter l'événement de fermeture du modal et d'exécuter une fonction.

Par exemple, prenons ce modal comme exemple:

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

Le bouton X en haut et le bouton de fermeture en bas peuvent tous deux masquer / fermer le modal à cause de data-dismiss="modal". Alors je me demande, si je pourrais en quelque sorte écouter ça?

Sinon, je pourrais le faire manuellement comme ça, je suppose ...

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

Qu'est-ce que tu penses?

Mis à jour pour Bootstrap 3 et 4

Les documents Bootstrap 3 et Bootstrap 4 font référence à deux événements que vous pouvez utiliser.

hide.bs.modal : cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée.
hidden.bs.modal : Cet événement est déclenché lorsque le modal a fini d'être caché à l'utilisateur (attendra la fin des transitions CSS).

Et donnez un exemple sur la façon de les utiliser:

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

Réponse de Legacy Bootstrap 2.3.2

La documentation de Bootstrap fait référence à deux événements que vous pouvez utiliser.

hide : cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée.
hidden : Cet événement est déclenché lorsque le modal a fini d'être caché à l'utilisateur (attendra la fin des transitions css).

Et fournit un exemple sur la façon de les utiliser:

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

Si votre div modal est ajouté dynamiquement, utilisez (Pour bootstrap 3)

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

Cela fonctionnera également pour le contenu non dynamique.

Il y a deux paires d'événements modaux, l'un est "show" et "montré", l'autre est "hide" et "hidden". Comme vous pouvez le voir à partir du nom, l'événement de masquage se déclenche lorsque le modal est sur le point d'être fermé, comme en cliquant sur la croix dans le coin supérieur droit ou sur le bouton de fermeture, etc. Alors que hidden est déclenché après la fermeture du modal. Vous pouvez tester vous-même ces événements. Par exemple:

$( '#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' )
   });

Et, en ce qui concerne votre question, je pense que vous devriez écouter l'événement «hide» de votre modal.

Événements modaux d'amorçage:

1. hide.bs.modal => Se produit lorsque le modal est sur le point d'être masqué.
2. hidden.bs.modal => Se produit lorsque le modal est complètement masqué (une fois les transitions CSS terminées).

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

J'espère que cela aidera.