Rumah > hujung hadapan web > tutorial js > Cara Membetulkan Modals Bertindih dalam Bootstrap: Penyelesaian Mudah dengan setTimeout dan Pengurusan Z-Index.

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

Barbara Streisand
Lepaskan: 2024-10-26 02:14:02
asal
466 orang telah melayarinya

How to Fix Overlapping Modals in Bootstrap:  A Simple Solution with setTimeout and Z-Index Management.

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan