L'appel d'une fonction sur bootstrap modal ouvrir
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 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 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">×</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 onclick écouteur du bouton, mais l'alerte le message était affiché avant que le modal apparaisse:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
5 réponses
Vous pouvez utiliser l'événement affiché / afficher 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 affiché mais vous l'utiliseriez comme ceci:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Voir les documents Bootstrap 3.0 ici sous "Événements".
Ne fonctionnera pas.. utilisez $(window) à la place
/ / POUR AFFICHER
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
/ / POUR CACHER
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});
Bootstrap modal expose les événements. Écoutez l'événement shown comme ceci
$('#my-modal').on('shown', function(){
// code here
});
Vous pouvez utiliser show au lieu de shown pour charger la fonction juste avant l'ouverture modale, au lieu d'après l'ouverture modale.
$('#code').on('show.bs.modal', function (e) {
// do something...
})
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 voulez 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.