Liez une fonction à Twitter Bootstrap Modal Fermer

Question

J'utilise le Twitter Bootstrap lib sur un nouveau projet et je veux pour une partie de la page pour rafraîchir et récupérer les dernières données JSON sur près modale. Je ne vois cela nulle part dans la documentation peuvent pointer quelqu'un dehors pour moi ou proposer une solution.

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

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

Je joins une « cache » classe au modales déjà il ne présente pas la charge de la page afin que chargerait deux fois

même si je retire la classe cache définir l'ID d'élément à display:none et ajouter console.log("THE MODAL CLOSED"); à la fonction ci-dessus quand je frappe rien arrive à proximité.

Answer 1

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 ? Events

Answer 2

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 Événements Modal des docs ici:

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

Answer 3

Démarrage Bootstrap 3 ( modifier toujours le même Bootstrap 4 ) il y a 2 cas où vous pouvez lancer des événements, être :

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

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

2. Lorsque l'événement "cacher" modal terminé

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

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

Answer 4

Au lieu de « live », vous devez utiliser « sur » l'événement, mais l'assigner à l'objet de document:

Utilisation:

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

Answer 5

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

Answer 6

Bootstrap fournir des événements que vous pouvez brancher dans modal , comme si vous voulez tirer un violon ici en savoir plus sur les méthodes modales et les événements ici Documentation

Answer 7

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 cache a été appelé.

hidden.bs.modal : Cet événement est déclenché lorsque le modal a être fini caché de l'utilisateur (attendra des transitions CSS pour compléter).

Answer 8

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

Il y a un problème avec ces événements:. Les popups dans le modal (popovers, infobulles, etc.) va déclencher cet événement

Il y a une autre façon d'attraper l'événement lorsqu'un ferme 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 depuis la in de classe est toujours définie lorsque l'événement hideis déclenché.

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

Answer 9

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

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

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

Answer 10

Je saute en super tard, mais pour les personnes utilisant modaux Bootstrap avec React Je l'ai utilisé MutationObserver pour détecter les changements de la visibilité d'un modal et en ajustant en conséquence l'état - ce procédé peut être appliqué pour exécuter une 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 se demandent sur le soutien du navigateur moderne, CanIUse a la couverture MutationObserver environ 87%

L'espoir qui aide quelqu'un:)

Cheers,

Jake

Answer 11

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 - sur la méthode