Bagaimana cara menangani acara penutupan modal di Twitter Bootstrap?

191

Di bootstrap Twitter, lihat dokumentasi modals . Saya tidak bisa mencari tahu apakah ada cara untuk mendengarkan acara tutup modal dan menjalankan fungsi.

mis. mari kita ambil modal ini sebagai contoh:

<div class="modal-header">
    <button type="button" class="close close_link" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
    <a href="#" class="btn close_link" data-dismiss="modal">Close</a>   
</div>

Tombol X di atas dan tombol tutup di bawah keduanya dapat menyembunyikan / menutup modal karena data-dismiss="modal". Jadi saya bertanya-tanya, apakah saya bisa mendengarkannya?

Atau saya bisa melakukannya secara manual seperti ini, saya kira ...

$("#salesitems_modal").load(url, data, function() { 
     $(this).modal('show'); 
     $(this).find(".close_link").click(modal_closing);
});

Bagaimana menurut anda?

jquery twitter-bootstrap modal-dialog Houman
sumber
2
kemungkinan duplikat Bind sebuah fungsi ke Twitter Bootstrap Modal Close
Salvador Dali

Jawaban:

370

Diperbarui untuk Bootstrap 3 dan 4

Bootstrap 3 dan Bootstrap 4 docs merujuk dua peristiwa yang dapat Anda gunakan.

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).

Dan berikan contoh tentang cara menggunakannya:

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

Legacy Bootstrap 2.3.2 menjawab

Dokumentasi Bootstrap merujuk pada dua peristiwa yang dapat Anda gunakan.

hide : Peristiwa ini dipecat segera ketika metode contoh menyembunyikan telah dipanggil.
disembunyikan : Acara ini dipecat ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi css selesai).

Dan memberikan contoh tentang cara menggunakannya:

$('#myModal').on('hidden', function () {
    // do something…
})
albertedevigo
sumber
1
Untuk beberapa alasan ini juga untuk saya ketika saya mouseout dari tombol yang saya miliki di ibukota. Dan ketika saya mengirimkan formulir di modal (bahkan sebelum acara onSubmit kebakaran). Adakah yang tahu cara menghentikan perilaku ini?
Guy
2
Untuk memberikan beberapa konteks tambahan, saya akan merekomendasikan menggunakan $ (dokumen) .on ('tersembunyi', '#myModal', function () {// do something}); untuk mencegah ini tidak berfungsi dalam situasi tertentu, seperti ketika ini terkandung dalam $ (dokumen). Sudah deklarasi fungsi.
Gareth Daine
halo, saya ingin menerapkan modal jquery tersembunyi. dan saya menerapkan kode yang sama dalam proyek saya tetapi tidak berfungsi. Apakah Anda memiliki saran yang sama?
Hardi Shah
@HardiShah, Anda harus mengajukan pertanyaan baru termasuk kode dan / atau kesalahan Anda.
albertedevigo
68

Jika modal Anda ditambahkan secara dinamis, maka gunakan (Untuk bootstrap 3)

$(document).on('hide.bs.modal','#modal-id', function () {
                alert('');
 //Do stuff here
});

Ini juga akan berfungsi untuk konten non-dinamis.

Bingung
sumber
perbedaan antara hide vs hidden ??
Mahi
3
@mahi. menyembunyikan acara dipecat, segera ketika metode contoh sembunyikan telah dipanggil. sedangkan acara tersembunyi dipecat ketika modal telah selesai disembunyikan dari pengguna (akan menunggu transisi CSS selesai).
Bingung
18

Ada dua pasangan peristiwa modal, satu adalah "menunjukkan" dan "ditampilkan", yang lainnya adalah "sembunyikan" dan "tersembunyi". Seperti yang dapat Anda lihat dari namanya, sembunyikan acara kebakaran ketika modal hampir menjadi dekat, seperti mengklik tanda silang di sudut kanan atas atau tombol tutup atau lebih. Sementara hidden dipecat setelah modalnya benar-benar dekat. Anda dapat menguji sendiri acara ini. Untuk exampel:

$( '#modal' )
   .on('hide', function() {
       console.log('hide');
   })
   .on('hidden', function(){
       console.log('hidden');
   })
   .on('show', function() {
       console.log('show');
   })
   .on('shown', function(){
      console.log('shown' )
   });

Dan, untuk pertanyaan Anda, saya pikir Anda harus mendengarkan acara 'sembunyikan' modal Anda.

Leo
sumber
1

Acara Modal Bootstrap:

  1. hide.bs.modal => Terjadi ketika modal akan disembunyikan.
  2. hidden.bs.modal => Terjadi ketika modal sepenuhnya tersembunyi (setelah transisi CSS selesai).
<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

Saya harap ini akan membantu.

vishpatel73
sumber