Appel d'une fonction sur une modale Bootstrap ouverte

Question

J'avais l'habitude d'utiliser la boîte de dialogue de jQuery UI, et elle avait l'inconvénient de ne pas pouvoir être utilisée. open où vous pouvez spécifier un 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 je possède.

Maintenant, je veux le faire en utilisant la modale 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 pour ce qui est du bouton qui ouvre la modale :

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

J'ai essayé d'utiliser un listener onclick du bouton, mais le message d'alerte s'est affiché antes de la modale est apparue :

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

Answer 1

Vous pouvez utiliser le événement montré /montrer l'événement en fonction de ce dont vous avez besoin :

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

Démonstration : Plunker

Mise à jour pour Bootstrap 3.0

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

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

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

Answer 2

Ne fonctionnera pas utilisez $(window) au lieu de

Pour l'exposition

$(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');
});

Answer 3

Vous pouvez utiliser show au lieu de shown pour avoir fait en sorte que la fonction se charge juste avant l'ouverture de la modale, au lieu d'après l'ouverture de la modale.

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

Answer 4

La modale Bootstrap expose des événements. Écoutez les shown l'événement comme ceci

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

Answer 5

Si quelqu'un a encore un problème, la seule chose qui fonctionne parfaitement pour moi est l'utilisation de (loaded.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
        });
});