Liez une fonction à Twitter Bootstrap Modal Close

J’utilise la librairie Twitter Bootstrap sur un nouveau projet et je souhaite qu’une partie de la page actualise et récupère les dernières données json sur la fermeture modale. Je ne le vois nulle part dans la documentation, quelqu’un peut me le signaler ou suggérer une solution.

Deux problèmes d’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 lors du chargement de la page afin de le charger deux fois

même si je supprime la classe hide et que l’identifiant de l’élément display:none et ajoute console.log("THE MODAL CLOSED"); à la fonction ci-dessus quand je frappe près rien ne se produit.

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 → Evénements

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 Evénements modaux des docs ici:

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

Démarrage de Bootstrap 3 ( edit: toujours le même dans Bootstrap 4 ) il y a 2 cas dans lesquels vous pouvez lancer des événements, à savoir:

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 “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’object 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 à modal , comme si vous souhaitez déclencher un événement lorsque le modal a été masqué à l’utilisateur, vous pouvez utiliser un événement caché.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

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

Il y a un problème avec ces événements: tout popup dans le modal (popovers, infobulles, etc.) déclenchera cet événement.

Il y a une autre façon d’attraper l’événement lorsqu’un modal se 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 l’événement hidden car la classe in est toujours définie lorsque le hide l’événement est déclenché.

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

Je saute en super retard ici, mais pour les utilisateurs de modaux Bootstrap avec React, j’utilise MutationObserver pour détecter les changements de 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, { atsortingbutes: true }); } }); } 

Pour ceux qui s’interrogent sur le support des navigateurs modernes, CanIUse a une couverture de MutationObserver d’ environ 87%

J’espère que ça aide quelqu’un 🙂

À votre santé,

Jake

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 placer en haut ne déclenche jamais l’événement.

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 masquage du modal de l’utilisateur est terminé (attendra la fin des transitions CSS).

Je le ferais comme ça:

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

Le rest a déjà été écrit par d’autres. Je recommande également la lecture de la documentation: méthode jquery – on