Συνήθιζα να χρησιμοποιώ τον διάλογο JQuery UI's, και είχε την επιλογή open
, όπου μπορείτε να καθορίσετε κάποιο κώδικα Javascript για να εκτελεστεί μόλις ανοίξει ο διάλογος. Θα χρησιμοποιούσα αυτή την επιλογή για να επιλέξω το κείμενο μέσα στο διάλογο χρησιμοποιώντας μια συνάρτηση που έχω.
Τώρα θέλω να το κάνω αυτό χρησιμοποιώντας το bootstrap's modal. Παρακάτω είναι ο κώδικας 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'
</pre>, </div>, </div>,
Και όσον αφορά το κουμπί που ανοίγει το modal:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Προσπάθησα να χρησιμοποιήσω έναν ακροατή onclick του κουμπιού, αλλά το μήνυμα ειδοποίησης εμφανίστηκε πριν εμφανιστεί το modal:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Μπορείτε να χρησιμοποιήσετε το συμβάν shown event/show event ανάλογα με τις ανάγκες σας:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Για το Bootstrap 3.0 μπορείτε ακόμα να χρησιμοποιήσετε το συμβάν που εμφανίζεται, αλλά θα το χρησιμοποιήσετε ως εξής:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Δείτε τα έγγραφα του Bootstrap 3.0 εδώ στο "Events".
δεν θα δουλέψει.. χρησιμοποιήστε $(window)
αντ' αυτού
//ΓΙΑ ΤΗΝ ΠΡΟΒΟΛΉ
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//ΓΙΑ ΑΠΌΚΡΥΨΗ
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});