Memanggil fungsi pada modal bootstrap terbuka

179

Saya dulu menggunakan dialog JQuery UI, dan ada openopsi, di mana Anda dapat menentukan beberapa kode Javascript untuk dijalankan setelah dialog dibuka. Saya akan menggunakan opsi itu untuk memilih teks dalam dialog menggunakan fungsi yang saya miliki.

Sekarang saya ingin melakukannya menggunakan modal bootstrap. 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">&times;</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 menggunakan pendengar onclick tombol, tetapi pesan peringatan ditampilkan sebelum modal muncul:

$( ".code-dialog" ).click(function(){
    alert("I want this to appear after the modal has opened!");
});
javascript jquery jquery-ui twitter-bootstrap modal-dialog Mohamed Khamis
sumber
3
shown.bs.modalPeristiwa terjadi ketika dokumen HTML berisi setidaknya <div class="modal fade"><div class="modal-dialog"></div></div>struktur.
Pemrogram Kimia
dublicate stackoverflow.com/questions/12190119/bootstrap-modal-show-event
gtzinos
Salam komentar @ Programmer Kimia, itu akan muncul dengan jawabannya
Tarek

Jawaban:

331

Anda dapat menggunakan acara yang ditampilkan / acara acara berdasarkan apa yang Anda butuhkan:

$( "#code" ).on('shown', function(){
    alert("I want this to appear after the modal has opened!");
});

Demo: Plunker

Pembaruan untuk Bootstrap 3.0

Untuk Bootstrap 3.0 Anda masih dapat menggunakan acara yang ditampilkan tetapi Anda akan menggunakannya seperti ini:

$('#code').on('shown.bs.modal', function (e) {
  // do something...
})

Lihat dokumentasi Bootstrap 3.0 di sini di bawah "Acara".

Arun P Johny
sumber
17
Gunakan $("#code").on("shown.bs.modal", function(e) {})untuk bootstrap 3.0.
Teewuane
pastikan untuk memperhitungkan apa yang dikatakan Programmer Kimia tentang perlunya struktur <div class = "modal fade"> <div class = "modal-dialog"> </div> </div> setidaknya untuk kode ini dipanggil
whyoz
1
The #codemengacu pada pemilih jQuery, salah satu bahan dasar untuk jQuery: w3schools.com/jquery/jquery_selectors.asp
DDW
Saya gunakan $(document).on("shown.bs.modal", ...untuk mendengarkan secara keseluruhan
vladkras
1
Setidaknya, ditampilkan.bs.modal benar-benar dijalankan sebelum modal ditampilkan. Ini bukan masalah dalam kasus saya, tetapi mungkin baik untuk diketahui.
Jonny
86

tidak akan berfungsi .. gunakan $(window)saja

Untuk Menampilkan

$(window).on('shown.bs.modal', function() { 
    $('#code').modal('show');
    alert('shown');
});

Untuk bersembunyi

$(window).on('hidden.bs.modal', function() { 
    $('#code').modal('hide');
    alert('hidden');
});
viper_tkd
sumber
5
$ ("#modal") .on ('diperlihatkan', function () {alert ("Saya ingin ini muncul setelah modal dibuka!");} Tidak berfungsi untuk saya tetapi $ (jendela) berfungsi !! Terima kasih @viper_tkd
Krutal Modi
1
Saya perlu mengikat modal APAPUN yang dibuka / ditutup, dan bukan oleh pemilih tertentu. Jawaban ini bekerja dengan baik untuk saya dalam kasus itu.
jyoseph
Ini berfungsi sebelum modal dimuat penuh pada GUI. Saya ingin mengambil data dari modal saya setelah modal dimuat - metode ini mengembalikan 'tidak terdefinisi' untuk semuanya karena modal GUI belum ada, sehingga bidang dan yang lainnya belum dapat ditanyakan. (tidak terlihat)
FrenkyB
Ini bekerja untuk saya, tetapi saya menambahkan cek di dalam handler untuk menargetkan satu modal spesifik: if( $('#code').is( e.relatedTarget ) ) { ... }karena saya memiliki beberapa di halaman.
allicarn
Terima kasih untuk nama acara yang benar, tetapi, tidak perlu mengganti ID elemen untuk $ (jendela). Menggunakan bs4 dengan jquery 3.4.
Jcc.Sanabria
17

Anda bisa menggunakan showalih-alih shownuntuk membuat fungsi memuat sebelum modal terbuka, bukan setelah modal terbuka.

$('#code').on('show.bs.modal', function (e) {
  // do something...
})
Atchyut Nagabhairava
sumber
9

Modal bootstrap memaparkan acara. Dengarkan shownacara seperti ini

$('#my-modal').on('shown', function(){
  // code here
});
Josnidhin
sumber
0

jika seseorang masih memiliki masalah, satu-satunya hal yang berfungsi dengan baik untuk saya dengan menggunakan (loaded.bs.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
        });
});
Erose
sumber
-4

Anda dapat menggunakan kode belw untuk menunjukkan dan menyembunyikan model bootstrap.

$('#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 harap jawaban ini bermanfaat untuk proyek Anda.

Gaurang Sondagar
sumber
7
copycat lagi ... lihat jawaban lain pengguna
Laurent B