Appel d'une fonction sur bootstrap modal open


179

J'avais l'habitude d'utiliser la boîte de dialogue de JQuery UI, et il y avait l' openoption, où vous pouvez spécifier du code Javascript à exécuter une fois la boîte de dialogue ouverte. J'aurais utilisé cette option pour sélectionner le texte dans la boîte de dialogue en utilisant une fonction que j'ai.

Maintenant, je veux faire cela en utilisant le modal de bootstrap. Voici le code HTMl:

<div id="code" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <pre>
print 'Hello World'

Et comme pour le bouton qui ouvre le modal:

 <a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>

J'ai essayé d'utiliser un écouteur onclick du bouton, mais le message d'alerte était affiché avant l'apparition du modal:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});

3
shown.bs.modalL'événement se produit lorsque le document HTML contient au moins une <div class="modal fade"><div class="modal-dialog"></div></div>structure.
Programmeur chimique


Salut le commentaire @Chemical Programmer, il devrait apparaître avec la réponse
Tarek

Réponses:


331

Vous pouvez utiliser l' événement / spectacle affiché en fonction de ce dont vous avez besoin:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

Démo: Plunker

Mise à jour pour Bootstrap 3.0

Pour Bootstrap 3.0, vous pouvez toujours utiliser l'événement affiché, mais vous l'utiliseriez comme ceci:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

Consultez la documentation de Bootstrap 3.0 ici sous «Événements».


17
Utilisez $("#code").on("shown.bs.modal", function(e) {})pour bootstrap 3.0.
teewuane

assurez-vous de prendre en compte ce que le programmeur chimique a dit à propos du besoin de la structure <div class = "modal fade"> <div class = "modal-dialog"> </div> </div> au moins pour que ce code soit appelé
whyoz

1
Le #codefait référence au sélecteur jQuery, l'un des ingrédients de base de jQuery: w3schools.com/jquery/jquery_selectors.asp
DdW

J'utilise $(document).on("shown.bs.modal", ...pour l'écoute globale
vladkras

1
Au moins le shown.bs.modal s'exécute réellement avant que le modal ne soit affiché. Ce n'est pas un problème dans mon cas, mais il peut être bon de savoir.
Jonny

86

ne fonctionnera pas .. utiliser à la $(window)place

Pour montrer

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

Pour se cacher

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});

5
$ ("#modal") .on ('shown', function () {alert ("Je veux que cela apparaisse après l'ouverture du modal!");} Cela ne fonctionnait pas pour moi mais $ (window) a fonctionné !! Merci @viper_tkd
Krutal Modi

1
J'avais besoin de me lier à TOUT modal qui s'ouvrait / se fermait, et non par un sélecteur spécifique. Cette réponse a bien fonctionné pour moi dans ce cas.
jyoseph

Cela fonctionne avant que modal ne soit complètement chargé sur l'interface graphique. Je veux prendre des données de mon modal après le chargement du modal - cette méthode renvoie «indéfini» pour tout car l'interface graphique modale n'existe pas encore, donc les champs et tout le reste ne sont pas encore interrogeables. (non visible)
FrenkyB

Cela a fonctionné pour moi, mais j'ai ajouté une vérification dans le gestionnaire pour cibler un modal spécifique: if( $('#code').is( e.relatedTarget ) ) { ... }car j'avais plusieurs sur la page.
allicarn

Merci pour le nom d'événement correct, mais il n'est pas nécessaire de remplacer l'ID d'élément pour $ (window). Utiliser bs4 avec jquery 3.4.
Jcc.Sanabria

17

vous pouvez utiliser showau lieu de shownpour que la fonction se charge juste avant l'ouverture modale, plutôt qu'après l'ouverture modale.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})

9

Le modal Bootstrap expose les événements. Écoutez l' shownévénement comme celui-ci

$('#my-modal').on('shown', function(){
  // code here
});

0

si quelqu'un a encore un problème, la seule chose qui fonctionne parfaitement pour moi en utilisant (shared.bs.modal):

 $('#editModal').on('loaded.bs.modal', function () {
       console.log('edit modal loaded');

       $('.datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            clearBtn: true,
            rtl: false,
            todayHighlight: true,
            toggleActive: true,
            changeYear: true,
            changeMonth: true
        });
});

-4

Vous pouvez utiliser le code belw pour afficher et masquer le modèle bootstrap.

$('#my-model').on('shown.bs.modal', function (e) {
  // do something here...
})

et si vous souhaitez masquer le modèle, vous pouvez utiliser le code ci-dessous.

$('#my-model').on('hidden.bs.modal', function() {
    // do something here...
});

J'espère que cette réponse est utile pour votre projet.


7
copycat again ... voir les autres réponses de l'utilisateur
Laurent B
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.