Appel d'une fonction sur bootstrap modal open

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!");
});

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».

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

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...
})

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

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

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
        });
});

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.