web-dev-qa-db-fra.com

Comment gérer l'événement de clôture modale dans Twitter Bootstrap?

Dans Twitter bootstrap, regardez la documentation modaux . Je n'ai pas été en mesure de savoir s'il existe un moyen d'écouter l'événement de clôture 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?

jquerytwitter-bootstrapmodal-dialog
176
Houman

Mise à jour pour Bootstrap 3 et 4

Bootstrap et Bootstrap 4 Les documents 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 de masquage a été appelée.
hidden.bs.modal : cet événement est déclenché lorsque le modal a fini d'être masqué à l'utilisateur (attend les transitions CSS à Achevée).

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

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

Legacy Bootstrap 2.3.2 answer

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 de masquage a été appelée.
hidden : cet événement est déclenché lorsque l'utilisateur a caché le modal (l'utilisateur attendra que les transitions css soient terminées).

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

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

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

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

Cela fonctionnera également pour le contenu non dynamique.

61
Confused

Il y a deux paires d'événements modaux, l'un est "show" et "montré", l'autre est "masqué" et "caché". Comme vous pouvez le voir à partir du nom, masquer les événements déclenchés lorsque modal est sur le point de se fermer, par exemple 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 ces événements vous-même. 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.

17
leo

Événements modaux bootstrap:

  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 va aider.

0
vishpatel73