Bagaimana untuk Memastikan Berbilang Modal Tindanan dengan Betul dengan Tirai Latar Belakang yang Boleh Dilihat dalam Bootstrap?

Tindan Berbilang Modal

Dalam senario ini, anda mahu tindanan muncul di atas modal pertama, bukannya di belakangnya.

Penyelesaian

Diinspirasikan oleh sumbangan daripada @YermoLamers dan @Ketwaroo, penyelesaian komprehensif melibatkan:

Backdrop Z-Index Fix

Untuk menangani isu tirai latar yang muncul di belakang modal pertama, laksanakan JavaScript berikut:

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

Penyesuaian Indeks-Z

Jika anda mahu untuk menyesuaikan pengiraan indeks-z, anda boleh menggunakan yang berikut:

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

Pembetulan Bar Skrol

Untuk menyelesaikan kes di mana penutupan modal kedua menghalang penatalan dalam modal yang melebihi ketinggian penyemak imbas, sertakan JavaScript berikut:

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

Versi

Penyelesaian ini diuji secara menyeluruh dengan Bootstrap versi 3.1.0 hingga 3.3.5. Dengan melaksanakan penyelesaian ini, anda boleh memastikan bahawa berbilang modal bertindih dengan betul, dengan tirai latar muncul di atas modal pertama dan bar skrol kekal berfungsi mengikut keperluan.

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