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

Tindan Berbilang Modal

Dalam antara muka dengan berbilang modal, adalah penting untuk memastikan bahawa modal yang dibuka disusun dengan betul, dengan setiap modal baharu muncul di atas yang sebelumnya. Walau bagaimanapun, isu biasa yang dihadapi oleh pembangun ialah modal berikutnya mungkin dipaparkan di belakang yang sedia ada, mewujudkan tindanan yang tidak diingini.

Untuk menangani isu ini, penyelesaian yang melibatkan pengubahsuaian sifat indeks-z dari latar belakang modal dan elemennya dipersembahkan.

Betulkan z-index Tirai Latar

Untuk memastikan susunan susun atur latar belakang modal yang betul, penyelesaian yang disesuaikan dilaksanakan. Khususnya, fungsi setTimeout digunakan, kerana tirai latar mod tidak hadir semasa pencetus acara show.bs.modal.

<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'));
});</code>

Pendekatan ini mempunyai beberapa kelebihan utama:

• Ia beroperasi dengan berkesan untuk setiap modal pada halaman, termasuk yang dibuat secara dinamik.
• Tirai latar menindih serta-merta mod di bawahnya, menghasilkan susunan yang lancar.

z-index Pengiraan

Dalam kes di mana nilai indeks z tersuai diutamakan, kaedah alternatif untuk mengira indeks z tertinggi pada halaman boleh digunakan:

<code class="javascript">const zIndex = 10 +
  Math.max(...Array.from(document.querySelectorAll('*')).map((el) => +el.style.zIndex));</code>

Pembetulan Bar Skrol

Untuk menangani isu yang berpotensi dengan penatalan apabila mod melangkaui ketinggian penyemak imbas, skrip tambahan boleh dilaksanakan:

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

Keserasian Versi

Penyelesaian yang dibentangkan telah diuji dengan teliti dan disahkan berfungsi dengan berkesan dengan Bootstrap versi 3.1.0 - 3.3.5.

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