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!");
});

— 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

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