J'avais l'habitude d'utiliser la boîte de dialogue de JQuery UI, et elle avait l'option open
, où vous pouvez spécifier un certain 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 faire cela 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">×</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 écouteur onclick du bouton, mais le message d'alerte s'est affiché avant l'apparition de la modale :
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Vous pouvez utiliser l'événement [shown event][1]/show event en fonction de vos besoins :
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Démonstration : [Plunker][2]
Pour Bootstrap 3.0, vous pouvez toujours utiliser l'événement présenté, mais vous l'utiliserez comme suit :
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
[Voir la documentation de Bootstrap 3.0 ici][3] sous "Events" ;.
[1] : https://getbootstrap.com/2.3.2/javascript.html#modals [2] : http://plnkr.co/edit/dawC31?p=preview [3] : https://getbootstrap.com/docs/3.3/javascript/#js-events
ne fonctionnera pas... utilisez plutôt $(window)
.
// POUR AFFICHAGE
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
// POUR CACHER
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});