Bind fungsi ke Twitter Bootstrap Modal Tutup


530

Saya menggunakan lib Bootstrap Twitter pada proyek baru dan saya ingin sebagian halaman menyegarkan dan mengambil data json terbaru tentang modal tutup. Saya tidak melihat ini di mana saja dalam dokumentasi yang dapat seseorang tunjukkan kepada saya atau menyarankan solusi.

Dua masalah dengan menggunakan metode yang didokumentasikan

 $('#my-modal').bind('hide', function () {
   // do something ...
 });

Saya melampirkan kelas "sembunyikan" ke modal sehingga tidak ditampilkan pada halaman memuat sehingga akan memuat dua kali

bahkan jika saya menghapus kelas sembunyikan dan mengatur id elemen display:nonedan menambahkan console.log("THE MODAL CLOSED");ke fungsi di atas ketika saya menekan tutup tidak ada yang terjadi.

Jawaban:


1139

Bootstrap 3 & 4

$('#myModal').on('hidden.bs.modal', function () {
    // do something…
});

Bootstrap 3: getbootstrap.com/javascript/#modals-events

Bootstrap 4: getbootstrap.com/docs/4.1/components/modal/#events

Bootstrap 2.3.2

$('#myModal').on('hidden', function () {
    // do something…
});

Lihat getbootstrap.com/2.3.2/javascript.html#modals → Acara


1
Ini tampaknya berfungsi kecuali, untuk beberapa alasan, ketika melayang di atas tombol di footer modal itu juga menyala. Tombolnya adalah tombol kirim reguler: <input type = "submit" class = "btn btn-info" value = "Go" /> Adakah yang tahu bagaimana agar acara hide tidak menyala ketika melayang di atasnya? Atau, bagaimana saya bisa mendeteksi bahwa itu dipecat karena melayang-layang? BTW: meskipun acara dipecat, dialog modal tidak ditutup.
Guy

2
Saya tidak melihat perilaku ini dengan Bootstrap 3, dapatkah Anda membuat biola?
sp00n

7
Jawaban ini mungkin harus menyebutkan perbedaan antara hidden.bs.modal dan hide.bs.modal. Tersembunyi dipecat ketika animasi CSS selesai, tetapi dalam pengujian saya jika tidak ada animasi, itu tidak pernah menyala (bisa jadi hanya bug saja). Jika Anda bekerja dengan manajemen data, mungkin lebih aman menggunakan hide.bs.modal, yang diaktifkan segera setelah .modal ('hide') dipanggil. getbootstrap.com/javascript/#modals-usage - Lihat subbagian Acara.
Evan Steinkerchner

2
Bootstrap 3: Ini berfungsi ketika saya mengklik pada tag modal yang ditandai data-dismiss="modal"(seperti tombol tutup), tetapi tidak berfungsi ketika saya mengklik area latar belakang hitam di sekitar modal. Modal ditolak, tetapi tidak dapat dibuka kembali sampai halaman diperbarui. Saya sudah mencoba keduanya 'hidden.bs.modal'dan 'hide.bs.modal'tidak berhasil.
marquito

5
@marquito Yang dapat Anda lakukan (apa yang saya lakukan) adalah menggunakannya seperti ini: $('#myModal').modal({ backdrop: 'static', keyboard: false });Dengan begitu, modal tidak akan menutup saat mengklik area abu-abu, atau saat menekan tombol Esc.
Aesede

123

Bootstrap 4

$('#my-modal').on('hidden.bs.modal', function () {
  window.alert('hidden event fired!');
});

Lihat JSFiddle ini untuk contoh kerja:

https://jsfiddle.net/6n7bg2c9/

Lihat bagian Acara Modal dokumen di sini:

https://getbootstrap.com/docs/4.3/components/modal/#events


1
Bagi siapa pun yang menemukan posting ini ingin menerapkan jenis panggilan balik ini, ada modul ekstensi untuk Bootstrap yang mencakup fungsionalitas ini dan juga banyak fungsi bermanfaat lainnya untuk secara dinamis membuat dialog / peringatan / konfirmasi: bootboxjs.com
jkriddle

Tanggapan @Ricardo Lima di bawah sekarang adalah metode yang tepat untuk memantau acara di jQuery / bootstrap
sbonami

@meatballs masih memberikan suara untuk contoh kerja..bahkan meskipun sudah usang.
Stephen Patten

@ 100acrewood Bung, sekarang itu yang ditemukan! Terima kasih! re: bootboxjs.com
Stephen Patten

46

Mulai Bootstrap 3 ( edit: masih sama di Bootstrap 4 ) ada 2 contoh di mana Anda dapat menjalankan peristiwa, yaitu:

1. Ketika modal "sembunyikan" acara dimulai

$('#myModal').on('hide.bs.modal', function () { 
    console.log('Fired at start of hide event!');
});  

2. Ketika modal "sembunyikan" acara selesai

$('#myModal').on('hidden.bs.modal', function () {
    console.log('Fired when hide event has finished!');
});

Ref: http://getbootstrap.com/javascript/#js-events


1
Ini membantu saya memperbaiki bug modal Bootstrap saya di mana ia akan menambah 15px hak padding ke tubuh pada penutupan modal apa pun. Terima kasih!
Sam Malayek

2
Bagus untuk menunjukkan 2 acara. Lebih baik bagi pemula seperti saya untuk mencatat bahwa ini perlu ditempatkan di bawah modal untuk acara yang akan dipecat.
Lynnell Emmanuel Neri

18

Sebagai ganti "live" Anda harus menggunakan "on" event, tetapi tetapkan ke objek dokumen:

Menggunakan:

$(document).on('hidden.bs.modal', '#Control_id', function (event) {
// code to run on closing
});

1
Ini adalah bagaimana Anda harus melakukannya jika modal ditambahkan secara dinamis. Menghemat saya banyak waktu.
Dylan Vander Berg

15
$(document.body).on('hidden.bs.modal', function () {
    $('#myModal').removeData('bs.modal')
});

6

Bootstrap menyediakan acara yang dapat Anda kaitkan ke modal , seperti jika Anda ingin memecat suatu peristiwa ketika modal telah selesai disembunyikan dari pengguna Anda dapat menggunakanacara hidden.bs.modal seperti ini

    /* hidden.bs.modal event example */
    $('#myModal').on('hidden.bs.modal', function () {
          window.alert('hidden event fired!');
    })

Lihat biola yang berfungsi di sini, baca lebih lanjut tentang metode modal dan acara di Dokumentasi


4

Bootstrap 4:

$('#myModal').on('hidden.bs.modal', function (e) {
   // call your method
})

hide.bs.modal : Peristiwa ini dipecat segera ketika metode contoh sembunyikan telah dipanggil.

hidden.bs.modal : Acara ini dipecat ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).


Cara ini juga berlaku untuk BS3. Silakan lihat jawaban yang diterima untuk cara BS2 (usang).
Roland

3

Saya akan melakukannya seperti ini:

$('body').on('hidden.bs.modal', '#myModal', function(){ //this call your method });

Selebihnya sudah ditulis oleh orang lain. Saya juga merekomendasikan membaca dokumentasi: metode jquery - on


2

Saya telah melihat banyak jawaban mengenai peristiwa bootstrap seperti hide.bs.modalyang dipicu ketika modal ditutup.

Ada masalah dengan peristiwa itu: sembulan di modal (popover, tooltips, dll) akan memicu peristiwa itu.

Ada cara lain untuk menangkap acara ketika modal ditutup.

$(document).on('hidden','#modal:not(.in)', function(){} );

Bootstrap menggunakan inkelas saat modal terbuka. Sangat penting untuk menggunakan hiddenevent karena kelas inmasih didefinisikan ketika event hidedipicu.

Solusi ini tidak akan berfungsi di IE8 karena IE8 tidak mendukung :not()pemilih Jquery .


2

Saya mengalami masalah yang sama dengan beberapa orang

$('#myModal').on('hidden.bs.modal', function () {
// do something… })

Anda harus menempatkan ini di bagian bawah halaman, menempatkannya di bagian atas tidak pernah menyalakan acara.


Memang. Ada baiknya Anda menyebutkan bahwa itu perlu ditempatkan di bawah modal untuk memecat acara.
Lynnell Emmanuel Neri

Saya akan mendefinisikan aturan sedikit lebih ketat dari itu. Ketika pemilih jQuery $("#myModal")dipanggil elemen HTML dengan ID myModalkebutuhan ada di DOM. Jadi Anda bisa memiliki kode ini di bagian atas halaman tetapi ditempatkan di dalam $(document).on("ready", function(){ ... });(atau fungsi serupa yang dipanggil setelah DOM diisi dengan elemen).
Andy Gee

0

jika Anda ingin memecat suatu fungsi pada setiap penutupan modal, Anda dapat menggunakan metode ini,

$(document).ready(function (){
    $('.modal').each(function (){
        $(this).on('hidden.bs.modal', function () {
            //fires when evey popup close. Ex. resetModal();
        });
    });
});

Jadi, Anda tidak perlu menentukan id modal setiap waktu.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.