JQuery UI'nin iletişim kutusunu kullanıyordum ve iletişim kutusu açıldığında çalıştırılacak bazı Javascript kodlarını belirtebileceğiniz `open' seçeneği vardı. Bu seçeneği, sahip olduğum bir işlevi kullanarak iletişim kutusundaki metni seçmek için kullanırdım.
Şimdi bunu bootstrap'ın modal özelliğini kullanarak yapmak istiyorum. HTMl kodu aşağıdadır:
<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'
Modalı açan düğmeye gelince:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Düğmenin onclick dinleyicisini kullanmayı denedim, ancak uyarı mesajı modal görünmeden önce görüntülendi:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
İhtiyacınız olan şeye göre gösterilen olay/gösterme olayını kullanabilirsiniz:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Bootstrap 3.0 için hala shown olayını kullanabilirsiniz ancak bunu şu şekilde kullanırsınız:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Bootstrap 3.0 dokümanlarına buradan bakabilirsiniz "Events" altında.
çalışmayacaktır... bunun yerine $(pencere)
kullanın
//GÖSTERİM İÇİN
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//GİZLEMEK İÇİN
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});