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


191

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?


Réponses:


370

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…
})

1
Pour une raison quelconque, cela se déclenche également pour moi lorsque je souris sur un bouton que j'ai dans le modal. Et quand je soumets un formulaire dans le modal (avant même que l'événement onSubmit ne se déclenche). Quelqu'un sait comment arrêter ce comportement?
Guy

2
Pour fournir un contexte supplémentaire, je recommanderais d'utiliser $ (document) .on ('hidden', '#myModal', function () {// faire quelque chose}); pour éviter que cela ne fonctionne pas dans certaines situations, comme lorsque cela est contenu dans une déclaration de fonction $ (document) .ready.
Gareth Daine

bonjour, je veux appliquer jquery modal caché. et j'ai appliqué le même code dans mon projet mais cela ne fonctionne pas. Avez-vous des suggestions pour la même chose?
Hardi Shah

@HardiShah, vous devriez poser une nouvelle question comprenant votre code et / ou des erreurs.
albertedevigo

68

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.


différence entre cacher et caché ??
Mahi

3
L'événement @mahi .hide est déclenché, immédiatement lorsque la méthode d'instance hide a été appelée. tandis que l'événement caché est déclenché lorsque le modal a fini d'être caché à l'utilisateur (attendra la fin des transitions CSS).
Confus le

18

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.


1

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.