Rumah > Artikel > hujung hadapan web > tutup modal javascript
Tutup Modal JavaScript
Modal ialah tetingkap timbul halaman web biasa, biasanya digunakan untuk memaparkan kandungan, meminta pengesahan atau mengumpul maklumat. Mencipta modal dalam JavaScript ialah operasi biasa, tetapi menutup modal mungkin tidak semudah itu. Artikel ini akan memperkenalkan beberapa kaedah biasa untuk menutup Modal JavaScript.
Jika anda menggunakan jQuery, anda boleh menggunakan kaedah berikut untuk menutup modal:
$(document).ready(function() { // 显示 modal $("#myModal").modal("show"); // 关闭 modal $("#myModal").modal("hide"); });
Gunakan modal("show")
untuk Tunjukkan modal, gunakan modal("hide")
untuk menutup modal. Antaranya, #myModal
ialah pemilih modal anda dan perlu diubah mengikut situasi sebenar anda.
Jika anda menggunakan Bootstrap, anda boleh menggunakan kaedah berikut untuk mematikan modal:
$(document).ready(function() { // 显示 modal $("#myModal").modal("show"); // 关闭 modal $("#myModal").modal("hide"); });
Serupa dengan kaedah jQuery, gunakan modal("show")
untuk memaparkan modal, gunakan modal("hide")
untuk menutup modal. Begitu juga, #myModal
ialah pemilih modal anda dan perlu diubah mengikut situasi sebenar anda.
Jika anda tidak mahu menggunakan jQuery atau Bootstrap, anda boleh menggunakan JavaScript asli untuk mematikan modal. Kaedah ini memerlukan penggunaan kaedah getElementById
untuk mendapatkan elemen modal dan menggunakan style.display
untuk menetapkan atribut display
nya kepada none
.
Berikut ialah contoh kod:
// 显示 modal document.getElementById("myModal").style.display = "block"; // 关闭 modal document.getElementById("myModal").style.display = "none";
Gunakan style.display = "block"
untuk menunjukkan modal dan style.display = "none"
untuk menutup modal. Begitu juga, myModal
ialah modal id
anda dan perlu diubah mengikut situasi sebenar anda.
Menambah butang tutup dalam modal boleh memberikan pengalaman pengguna yang lebih baik dan juga memudahkan pengguna menutup modal. Berikut ialah contoh Kod:
<!-- 在 modal 中添加关闭按钮 --> <div class="modal-header"> <h5 class="modal-title">Modal 标题</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
Seperti yang anda lihat, butang tutup ditambahkan pada kepala modal, di mana atribut data-dismiss="modal"
diperlukan, yang mengarahkan butang untuk menutup modal. Apabila pengguna mengklik butang tutup, acara hide.bs.modal
akan dicetuskan Peristiwa ini boleh ditangkap dengan cara berikut:
$('#myModal').on('hide.bs.modal', function (e) { // do something... })
Untuk menutup modal, anda boleh menggunakan modal("hide")
atau style.display = "none"
, kaedah yang anda pilih bergantung pada kaedah pelaksanaan anda.
Ringkasan
Terdapat banyak cara untuk menutup modal dalam JavaScript, seperti menggunakan jQuery, Bootstrap atau JavaScript asli dan butang tutup boleh ditambahkan pada modal untuk memberikan pengalaman pengguna yang lebih baik . Kaedah mana yang hendak digunakan bergantung pada pelaksanaan dan keadaan anda. Tidak kira kaedah yang anda pilih, anda perlu memastikan bahawa modal boleh ditutup dengan jayanya, jika tidak, ia boleh menjejaskan pengalaman pengguna.
Atas ialah kandungan terperinci tutup modal javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!