web-dev-qa-db-fra.com

Lier une fonction à Twitter Bootstrap Modal Fermer

J'utilise la librairie Twitter Bootstrap sur un nouveau projet et je souhaite, pour une partie de la page, actualiser et récupérer les dernières données JSON à 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 "masquer" au modal afin qu'il ne s'affiche pas au chargement de la page, ce qui le chargerait deux fois

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

jquerymodal-dialogtwitter-bootstrap
457
BillPull

Bootstrap 3 et 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

975
Ricardo Lima

Bootstrap 4

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

Voir ce JSFiddle pour un exemple de travail:

http://jsfiddle.net/aq9Laaew/120440/

Voir la section Événements modaux de la documentation ici:

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

109
aar0n

En démarrant Bootstrap 3 (edit: toujours identique dans Bootstrap 4), il existe 2 instances dans lesquelles vous pouvez déclencher des événements, à savoir: 

1. Lorsque l'événement "masqué" modal commence

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

2. Lorsque l'événement "masqué" 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

42
aesede

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

Utilisation:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
14
Oscar
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
13
SUNny.K

Bootstrap fournit des événements que vous pouvez associer à modal , comme si vous vouliez déclencher un événement lorsque le modal est terminé. masqué de l'utilisateur, vous pouvez utiliser hidden.bs.modal event like this

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

Vérifiez le fonctionnement d'un fiddle ici [ } _ en savoir plus sur les méthodes modales et les événements ici dans DOCUMENTATION

6
Subodh Ghulaxe

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

Il y a un problème avec ces événements: toute fenêtre contextuelle du modal (popovers, info-bulles, etc.) déclenchera 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 classe in lorsque le modal est ouvert . Il est très important d’utiliser l’événement hidden car la classe in est toujours définie lorsque l’événement hide est déclenché.

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

2
Tortus

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 de masquage a été appelée.

hidden.bs.modal : Cet événement est déclenché lorsque le modal a fini d'être masqué par l'utilisateur (attend que les transitions CSS soient terminées).

1
sendon1982

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

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

Vous devez placer ceci au bas de la page, le haut ne déclenchera jamais l'événement.

1
Michael Granger

J'interviens très tard ici, mais pour les personnes utilisant les modaux Bootstrap avec React, j'ai utilisé MutationObserver pour détecter les modifications de la visibilité d'un modal et ajuster l'état en conséquence - cette méthode pourrait être appliquée à n'importe quelle fonction le modal est fermé: 

//react stuff
componentDidMount: function() {
    var self = this;
    $(function() {
        $("#example_modal").addClass('modal');
        //use MutationObserver to detect visibility change
        //reset state if closed
        if (MutationObserver) {
        var observer = new MutationObserver(function(mutations) {
            //use jQuery to detect if element is visible
            if (!$('#example_modal').is(':visible')) {
                //reset your state
                self.setState({
                    thingone: '',
                    thingtwo: ''
                });
            }
        });
        var target = document.querySelector('#example_modal');
            observer.observe(target, {
                attributes: true
          });
        }
    });
}

Pour ceux qui s’interrogent sur la prise en charge des navigateurs modernes, CanIUse offre la couverture de MutationObserver à environ 87%

J'espère que ça aide quelqu'un :)

À votre santé, 

Jake

1
jacobedawson

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

0
tkartas