Cara Membetulkan Modals Bertindih dalam Bootstrap: Penyelesaian Mudah dengan setTimeout dan Pengurusan Z-Index.

Mudah Bertindih Berbilang Modal

Menghadapi berbilang modal yang bertindih antara satu sama lain boleh mengecewakan, terutamanya apabila anda memerlukan modal baharu untuk muncul di atas. di belakang yang sedia ada. Untuk menyelesaikan isu ini, kami akan menyelidiki penyelesaian yang diilhamkan oleh dua penyumbang cemerlang: @YermoLamers dan @Ketwaroo.

Backdrop Z-Index Fix

Penyelesaian ini bergantung pada fungsi setTimeout, kerana elemen .modal-backdrop belum dicipta apabila acara show.bs.modal dicetuskan.

<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:

• Ia terpakai pada semua elemen .modal pada halaman, termasuk elemen yang dicipta secara dinamik.
• Tirai latar serta-merta menindi mod sebelumnya.

Pengiraan Indeks Z

Jika anda memilih untuk tidak mengeraskan indeks z, anda boleh mengira indeks z tertinggi pada halaman secara dinamik:

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

Pembetulan Bar Skrol

Dalam kes di mana modal melebihi ketinggian penyemak imbas, anda mungkin menghadapi masalah menatal semasa menutup modal dalaman. Untuk menangani perkara ini, tambahkan perkara berikut:

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

Keserasian

Penyelesaian ini telah diuji dengan Bootstrap versi 3.1.0 - 3.3.5.

Contoh JSFiddle

[Contoh JSFiddle](https://jsfiddle.net/)

Atas ialah kandungan terperinci Cara Membetulkan Modals Bertindih dalam Bootstrap: Penyelesaian Mudah dengan setTimeout dan Pengurusan Z-Index.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!