So beheben Sie überlappende Modalitäten in Bootstrap: Eine einfache Lösung mit setTimeout und Z-Index-Verwaltung.

Mehrere Modalitäten, die sich leicht überlagern

Es kann frustrierend sein, auf mehrere Modalitäten zu stoßen, die sich gegenseitig überlagern, insbesondere wenn stattdessen die neue Modalität oben angezeigt werden soll hinter dem bestehenden. Um dieses Problem zu lösen, werden wir uns mit einer Lösung befassen, die von zwei brillanten Mitwirkenden inspiriert wurde: @YermoLamers und @Ketwaroo.

Backdrop Z-Index Fix

Diese Lösung basiert auf auf einer setTimeout-Funktion, da das .modal-backdrop-Element noch nicht erstellt ist, wenn das show.bs.modal-Ereignis ausgelöst wird.

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

Dieser Ansatz hat mehrere Vorteile:

• Es gilt für alle .modal-Elemente auf der Seite, einschließlich dynamisch erstellter.
• Der Hintergrund überlagert sofort das vorherige Modal.

Z-Index-Berechnung

Wenn Sie den Z-Index nicht fest codieren möchten, können Sie den höchsten Z-Index auf der Seite dynamisch berechnen:

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

Scrollbar Fix

In Fällen, in denen ein Modal die Browserhöhe überschreitet, können beim Schließen eines inneren Modals Probleme beim Scrollen auftreten. Um dies zu beheben, fügen Sie Folgendes hinzu:

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

Kompatibilität

Diese Lösung wurde mit den Bootstrap-Versionen 3.1.0 – 3.3.5 getestet.

Beispiel JSFiddle

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

Das obige ist der detaillierte Inhalt vonSo beheben Sie überlappende Modalitäten in Bootstrap: Eine einfache Lösung mit setTimeout und Z-Index-Verwaltung.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!