Lier une fonction à Twitter Bootstrap Modal Fermer


530

J'utilise la bibliothèque Twitter Bootstrap sur un nouveau projet et je souhaite qu'une partie de la page soit actualisée et récupérée les dernières données json sur la fermeture modale. Je ne vois cela nulle part dans la documentation. Quelqu'un peut-il me le signaler ou suggérer une solution.

Deux problèmes avec l'utilisation des méthodes documentées

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

J'attache déjà une classe "hide" au modal pour qu'il ne s'affiche pas au chargement de la page, ce qui chargerait deux fois

même si je supprime la classe hide et que je définis l'ID de l'élément display:noneet que j'ajoute console.log("THE MODAL CLOSED");à la fonction ci-dessus lorsque je clique sur close, rien ne se passe.

Réponses:


1139

Bootstrap 3 & 4

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

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

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

Voir getbootstrap.com/2.3.2/javascript.html#modals → Événements


1
Cela semble fonctionner, sauf pour une raison quelconque, lorsque vous survolez un bouton du pied de page modal, il se déclenche également. Le bouton est un bouton d'envoi normal: <input type = "submit" class = "btn btn-info" value = "Go" /> Avez-vous une idée de comment ne pas déclencher l'événement hide lorsque vous passez la souris dessus? Ou, comment puis-je détecter qu'il a été tiré à cause du vol stationnaire? BTW: même si l'événement est déclenché, la boîte de dialogue modale ne se ferme pas.
Guy

2
Je ne vois pas ce comportement avec Bootstrap 3, pouvez-vous faire un violon?
sp00n

7
Cette réponse devrait probablement mentionner la différence entre hidden.bs.modal et hide.bs.modal. Hidden est déclenché lorsque les animations CSS sont terminées, mais dans mes tests, s'il n'y a pas d'animations, il ne se déclenche jamais (cela pourrait être un bogue cependant). Si vous travaillez avec la gestion des données, il peut être plus sûr d'utiliser hide.bs.modal à la place, qui est déclenché dès que .modal ('hide') est appelé. getbootstrap.com/javascript/#modals-usage - Voir la sous-section Événements.
Evan Steinkerchner

2
Bootstrap 3: Cela fonctionne lorsque je clique sur une balise modale marquée comme data-dismiss="modal"(comme un bouton de fermeture), mais cela ne fonctionne pas lorsque je clique sur la zone de fond noir entourant le modal. Le modal est ignoré, mais il ne peut pas être rouvert tant que la page n'est pas actualisée. J'ai essayé les deux 'hidden.bs.modal'et 'hide.bs.modal'en vain.
marquito

5
@marquito Ce que vous pouvez faire (ce que je fais) est de l'utiliser comme ceci: De $('#myModal').modal({ backdrop: 'static', keyboard: false });cette façon, le modal ne se fermera pas lorsque vous cliquez sur la zone grise, ni lorsque vous appuyez sur la touche Echap.
aesede

123

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

Voir ce JSFiddle pour un exemple de travail:

https://jsfiddle.net/6n7bg2c9/

Voir la section Modal Events des documents ici:

https://getbootstrap.com/docs/4.3/components/modal/#events


1
Pour tous ceux qui trouvent que cet article cherche à implémenter ce type de rappel, il existe un module d'extension pour Bootstrap qui inclut cette fonctionnalité ainsi que de nombreuses autres fonctions utiles pour créer dynamiquement des dialogues / alertes / confirmations: bootboxjs.com
jkriddle

La réponse de @Ricardo Lima ci-dessous est maintenant la bonne méthode pour surveiller les événements dans jQuery / bootstrap
sbonami

@meatballs est toujours un vote positif pour l'exemple de travail .. même si bind a été déprécié.
Stephen Patten

@ 100acrewood Mec, maintenant c'est une trouvaille! Je vous remercie! re: bootboxjs.com
Stephen Patten

46

Au démarrage de Bootstrap 3 ( modification: toujours la même dans Bootstrap 4 ), il existe 2 instances dans lesquelles vous pouvez déclencher des événements, à savoir:

1. Au début de l'événement modal de "masquage"

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. Lorsque l'événement "masquer" modal est terminé

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Réf: http://getbootstrap.com/javascript/#js-events


1
Cela m'a aidé à corriger mon bogue modal Bootstrap où il ajoutait 15 pixels de droit de remplissage au corps à la fermeture de n'importe quel modal. Merci!
Sam Malayek

2
Bon pour montrer les 2 événements. Mieux vaut pour les débutants comme moi de noter que cela doit être placé sous le modal pour que l'événement soit déclenché.
Lynnell Emmanuel Neri

18

Au lieu de "live", vous devez utiliser l'événement "on", mais l'affecter à l'objet document:

Utilisation:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

1
Voici comment procéder si le modal est ajouté dynamiquement. Cela m'a fait gagner une tonne de temps.
Dylan Vander Berg

15
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

6

Bootstrap fournit des événements que vous pouvez connecter au modal , comme si vous voulez déclencher un événement lorsque le modal a fini d'être caché à l'utilisateur, vous pouvez utiliser un événement hidden.bs.modal comme celui-ci

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

Vérifiez un violon de travail ici en savoir plus sur les méthodes modales et les événements ici dans la documentation


4

Bootstrap 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

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


Cette méthode est également valable pour BS3. Veuillez consulter la réponse acceptée pour la méthode BS2 (obsolète).
Roland

3

Je le ferais comme ça:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

Le reste a déjà été écrit par d'autres. Je recommande également de lire la documentation: jquery - on method


2

J'ai vu de nombreuses réponses concernant les événements d'amorçage, tels que ceux hide.bs.modalqui se déclenchent à la fermeture du modal.

Il y a un problème avec ces événements: tous les popups dans le modal (popovers, info-bulles, etc.) déclencheront cet événement.

Il existe un autre moyen d'attraper l'événement à la fermeture d'un modal.

$(document).on('hidden','#modal:not(.in)', function(){} );

Bootstrap utilise la inclasse lorsque le modal est ouvert. Il est très important d'utiliser l' hiddenévénement, car la classe inest toujours définie lorsque l'événement hideest déclenché.

Cette solution ne fonctionnera pas dans IE8 car IE8 ne prend pas en charge le :not()sélecteur Jquery .


2

J'avais les mêmes problèmes que certains avec

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

Vous devez le placer en bas de la page, le placer en haut ne déclenche jamais l'événement.


En effet. Il est bon que vous ayez mentionné qu'il doit être placé en dessous du modal pour déclencher l'événement.
Lynnell Emmanuel Neri

Je définirais les règles un peu plus strictes que cela. Lorsque le sélecteur jQuery $("#myModal")est invoqué, l'élément HTML avec un ID de myModalbesoins doit exister dans le DOM. Vous pourriez donc avoir ce code en haut de la page mais placé dans un $(document).on("ready", function(){ ... });(ou une fonction similaire qui est appelée après que le DOM est rempli avec l'élément).
Andy Gee

0

si vous souhaitez déclencher une fonction à chaque clôture modale, vous pouvez utiliser cette méthode,

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

Vous n'avez donc pas besoin de spécifier les identifiants modaux à chaque fois.

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.