web-dev-qa-db-fra.com

Appeler une fonction sur bootstrap modal open

J'avais l'habitude d'utiliser la boîte de dialogue de JQuery UI, dotée de l'option open, dans laquelle 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 à l'aide d'une fonction que j'ai.

Maintenant, je veux le faire en utilisant le modal de bootstrap. Ci-dessous 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 le modal est apparu:

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

Vous pouvez utiliser le événement montré / spectacle 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 indiqué, mais vous l'utiliseriez comme ceci:

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

Voir la documentation Bootstrap 3.0 ici sous "Événements".

261
Arun P Johny

ne fonctionnera pas .. utilisez plutôt $(window)

// POUR MONTRER

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

// POUR CACHER

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

vous pouvez utiliser show au lieu de shown pour que la fonction soit chargée juste avant l'ouverture modale, et non après l'ouverture modale.

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

Le mode bootstrap expose les événements. Écoutez l’événement shown comme celui-ci

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

si quelqu'un a encore un problème, la seule chose qui fonctionne parfaitement pour moi en utilisant (Load.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
        });
});
0
Erose