Lier une fonction à Twitter Bootstrap modal Close

j'utilise le Bootstrap lib de Twitter sur un nouveau projet et je veux une partie de la page pour rafraîchir et récupérer les dernières données json sur modal close. Je ne le vois nulle part dans la documentation.quelqu'un peut me le montrer ou me proposer une solution.

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

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

j'attache une classe" hide " au modal déjà de sorte qu'il ne s'affiche pas sur la page charge de sorte que se chargerait deux fois

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

426
demandé sur Liam 2011-12-03 03:06:25

11 réponses

Bootstrap 3

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

voir getbootstrap.com/javascript/#modals-events

Bootstrap 2.3.2

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

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

910
répondu Ricardo Lima 2016-05-01 20:41:10

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 des événements modaux de la docs ici:

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

100
répondu aar0n 2018-07-28 18:34:29

Starting Bootstrap 3 ( edit: still the same in Bootstrap 4 ) il y a 2 instances dans lesquelles vous pouvez démarrer des événements, soit:

1. Quand modal "cacher" l'événement commence

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

2. lorsque l'événement modal" hide "est terminé

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

Ref: http://getbootstrap.com/javascript/#js-events

40
répondu aesede 2017-05-13 15:39:57

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

utiliser:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});
12
répondu Oscar 2014-02-27 04:06:29
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});
12
répondu SUNny.K 2015-03-23 09:08:52

Bootstrap fournir des événements que vous pouvez accrocher dans modal , comme si vous voulez tirer un événement lorsque le modal a fini d'être caché de l'utilisateur, vous pouvez utiliser caché.bs.événement modal comme ceci

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

Vérifier un groupe de travail violon ici en savoir plus à propos de modale des méthodes et des événements, ici dans Documentation

6
répondu Subodh Ghulaxe 2013-11-25 18:32:08

j'ai vu beaucoup de réponses concernant les événements bootstrap tels que hide.bs.modal qui se déclenche lorsque le modal ferme.

il y a un problème avec ces événements: n'importe quel popups dans le modal (popovers, tooltips, etc) déclenchera cet événement.

il y a une autre façon d'attraper l'événement quand un modal ferme.

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

Bootstrap utilise la classe in lorsque le modal est ouvert. Il est très important d'utiliser le hidden événement puisque la classe in est encore définie lorsque l'événement hide est déclenché.

Cette solution ne fonctionnera pas dans IE8 puisque IE8 ne supporte pas le sélecteur :not() de Jquery.

2
répondu Tortus 2015-10-19 20:42:43

je suis en train de sauter très tard ici, mais pour les gens qui utilisent les modaux Bootstrap avec React j'ai utilisé MutationObserver pour détecter les changements dans la visibilité d'un modal et ajuster l'état en conséquence - cette méthode pourrait être appliquée pour exécuter n'importe quelle fonction lorsque 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 a la couverture de MutationObserver à autour de 87%

Espère que ça aide quelqu'un :)

Cheers,

Jake

1
répondu jacobedawson 2016-04-26 00:06:25

j'ai eu les mêmes problèmes que certains avec

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

vous devez placer cela au bas de la page, en le plaçant au haut ne déclenche jamais l'événement.

1
répondu Michael Granger 2016-07-13 14:01:17

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 hide instance a été appelée.

caché.bs.modal : Cet événement est déclenché lorsque le modal a fini d'être caché de l'utilisateur (va attendre pour les transitions CSS).

1
répondu sendon1982 2018-03-24 04:44:34

je le ferais comme ceci:

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

Le reste a déjà été écrit par d'autres. Je recommande également la lecture de la documentation: jQuery-on méthode

0
répondu tkartas 2018-07-27 12:43:12