Lier une fonction à Twitter Bootstrap Modal Fermer

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.

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

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

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

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

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

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

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

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

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 .

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.

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.