bootstrap javascript menutup kotak modal

Dalam pembangunan web, kotak modal ialah elemen antara muka yang biasa digunakan Ia boleh digunakan untuk memaparkan maklumat segera, mengisi borang, dsb. Bootstrap ialah rangka kerja bahagian hadapan yang digunakan secara meluas yang menyediakan banyak komponen mudah, termasuk kotak modal. Kod JavaScript yang digunakan dengan kotak modal boleh mengawal paparan, menyembunyikan, menutup dan gelagat lain kotak modal. Artikel ini akan memperkenalkan cara menggunakan kod JavaScript Bootstrap untuk menutup kotak modal.

Kaedah untuk menutup kotak modal

Bootstrap menyediakan pelbagai cara untuk menutup kotak modal:

• Klik butang tutup dalam kotak modal;
• Klik di luar kotak modal;
• Panggil kaedah API dalam JavaScript.

Di sini kita fokus pada cara ketiga, iaitu menutup kotak modal melalui kod JavaScript.

Gunakan kaedah API untuk menutup kotak modal

Kotak modal Bootstrap menyediakan kaedah modal, yang menyokong berbilang operasi, seperti membuka, menutup, menukar, dsb. Antaranya, kaedah untuk menutup kotak modal ialah hide Penggunaan khusus adalah seperti berikut:

$('#myModal').modal('hide');

di mana '#myModal' ialah id kotak modal, anda juga boleh menggantikannya dengan pemilih lain.

Contohnya, kodnya adalah seperti berikut:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ini ialah struktur modal mudah yang termasuk butang tutup. Mari kita lihat cara untuk mematikannya menggunakan kod JavaScript.

Pertama, kita perlu mendapatkan objek jQuery kotak modal:

const myModal = $('#myModal');

Kemudian, kita boleh merangkum kaedah menutup kotak modal ke dalam fungsi:

function hideModal() {
  myModal.modal('hide');
}

Apabila diperlukan Untuk menutup kotak modal, anda hanya perlu memanggil fungsi ini:

hideModal();

Ringkasan

Artikel ini memperkenalkan cara menutup kotak modal dalam kod JavaScript Bootstrap. Melalui kaedah modal, kami boleh mengawal paparan, menyembunyikan, menukar dan gelagat lain kotak modal secara dinamik dalam kod JavaScript, yang sangat mudah. Dalam proses pembangunan seterusnya, kami boleh menggunakan kaedah ini dengan sewajarnya untuk mengoptimumkan pengalaman pengguna berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci bootstrap javascript menutup kotak modal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!