Bagaimana untuk Memastikan Tindanan Berbilang Modal dalam Susunan yang Betul dalam Bootstrap?

Cara Membuat Tindanan Berbilang Modal dalam Susunan Yang Betul

Dalam senario tertentu, perlu untuk memaparkan berbilang modal pada halaman yang sama. Walau bagaimanapun, memastikan bahawa setiap modal muncul di atas yang sebelumnya boleh mencabar. Artikel ini meneroka penyelesaian untuk tindanan modal dalam susunan yang betul, terutamanya apabila lebih daripada dua modal terlibat.

Persediaan

Dalam coretan kod yang diberikan, berbilang modal ( "#myModal" dan "#myModal2") diprogramkan untuk dilancarkan melalui acara butang. Isunya terletak pada cara mod "#myModal2" muncul di sebalik modal "#myModal", dan bukannya menindihnya.

Penyelesaian

Penyelesaian berkisar pada pembuatan Fungsi JavaScript yang mengurus z-indeks modal dan latar belakangnya dengan cekap. Fungsi ini, yang dihuraikan di bawah, mencapai tingkah laku yang diingini dengan melaksanakan langkah berikut:

1. Pembetulan Indeks Z Tirai Latar:

   • A Fungsi setTimeout digunakan untuk menangani kelewatan dalam penciptaan elemen .modal-backdrop.
   • Apabila setiap modal menjadi kelihatan, indeks-znya dinaikkan secara beransur-ansur, memastikan ia menindih modal sebelumnya.
   • Indeks z .modal-backdrop ditetapkan menjadi kurang satu daripada indeks z modal, membolehkannya berfungsi sebagai latar belakang untuk modal tanpa mengaburinya.

2. Pembetulan Bar Skrol:

   • Apabila mod yang melebihi ketinggian penyemak imbas ditutup, menatal dalam mod yang boleh dilihat di bawahnya menjadi dilumpuhkan. Untuk menangani perkara ini, fungsi dilaksanakan apabila modal disembunyikan, yang membolehkan semula menatal dengan mengekalkan kelas buka modal pada elemen badan halaman.

Coretan Kod

<code class="javascript">$(document).on('show.bs.modal', '.modal', function() {
  const zIndex = 1040 + 10 * $('.modal:visible').length;
  $(this).css('z-index', zIndex);
  setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});

$(document).on('hidden.bs.modal', '.modal', () => $('.modal:visible').length && $(document.body).addClass('modal-open'));</code>

Kesimpulan

Melaksanakan penyelesaian ini memastikan tindanan berbilang modal dalam susunan yang betul, dengan tirai latar muncul secara konsisten di belakang modal aktif. Teknik ini telah diuji dan berfungsi dengan berkesan untuk Bootstrap versi 3.1.0 hingga 3.3.5.

Atas ialah kandungan terperinci Bagaimana untuk Memastikan Tindanan Berbilang Modal dalam Susunan yang Betul dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!