Aku digunakan untuk menggunakan JQuery UI's dialog, dan itu telah membuka
pilihan, di mana anda dapat menentukan beberapa kode Javascript untuk mengeksekusi setelah dialog dibuka. Saya akan menggunakan opsi untuk memilih teks dalam dialog menggunakan fungsi yang saya miliki.
Sekarang saya ingin melakukan yang menggunakan bootstrap's modal. Di bawah ini adalah kode 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'
Dan untuk tombol yang membuka modal:
<a href="#code" data-toggle="modal" class="btn code-dialog">Display code</a>
Saya mencoba untuk menggunakan onclick pendengar tombol, tapi pesan peringatan ditampilkan sebelum modal muncul:
$( ".code-dialog" ).click(function(){
alert("I want this to appear after the modal has opened!");
});
Anda dapat menggunakan ditunjukkan acara/menampilkan acara yang didasarkan pada apa yang anda butuhkan:
$( "#code" ).on('shown', function(){
alert("I want this to appear after the modal has opened!");
});
Demo: Plunker
Untuk Bootstrap 3.0 anda masih dapat menggunakan ditampilkan acara tersebut, tetapi anda akan menggunakannya seperti ini:
$('#code').on('shown.bs.modal', function (e) {
// do something...
})
Lihat Bootstrap 3.0 docs di sini di bawah "Peristiwa".
tidak akan bekerja.. gunakan $(window)
bukan
//UNTUK MENAMPILKAN
$(window).on('shown.bs.modal', function() {
$('#code').modal('show');
alert('shown');
});
//UNTUK HIDDING
$(window).on('hidden.bs.modal', function() {
$('#code').modal('hide');
alert('hidden');
});
jika seseorang masih memiliki masalah satu-satunya hal yang bekerja dengan baik bagi saya dengan menggunakan (dimuat.b.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
});
});
Anda dapat menggunakan belw kode untuk menampilkan dan menyembunyikan bootstrap model.
$('#my-model').on('shown.bs.modal', function (e) {
// do something here...
})
dan jika anda ingin menyembunyikan model maka anda dapat menggunakan kode di bawah ini.
$('#my-model').on('hidden.bs.modal', function() {
// do something here...
});
Saya berharap jawaban ini berguna untuk proyek anda.