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.

1. Kaedah menggunakan jQuery

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.

2. Menggunakan kaedah Bootstrap

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.

3. Gunakan kaedah JavaScript asli

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

4. Tambah butang tutup dalam modal

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">&times;</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!