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.
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
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:
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!');
});
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
});
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
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
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.
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
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.
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).
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