Wie kann ein korrektes modales Stapeln mit mehreren Modalen in Bootstrap sichergestellt werden?

Überlagerung mehrerer Modalitäten

In einer Schnittstelle mit mehreren Modalitäten ist es entscheidend, sicherzustellen, dass die geöffneten Modalitäten korrekt gestapelt werden und jedes neue Modalität angezeigt wird über den vorherigen. Ein häufiges Problem von Entwicklern besteht jedoch darin, dass nachfolgende Modals möglicherweise hinter vorhandenen angezeigt werden, wodurch eine unerwünschte Überlagerung entsteht.

Um dieses Problem zu beheben, wurde eine Lösung vorgeschlagen, die die Änderung der Z-Index-Eigenschaft der Modal-Hintergründe und umfasst seine Elemente werden präsentiert.

Hintergrund-Z-Index-Korrektur

Um die korrekte Stapelreihenfolge modaler Hintergründe sicherzustellen, wird eine maßgeschneiderte Lösung implementiert. Insbesondere wird eine setTimeout-Funktion verwendet, da der modale Hintergrund während des show.bs.modal-Ereignisauslösers nicht vorhanden ist.

<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 bietet mehrere entscheidende Vorteile:

• Es funktioniert effektiv für jedes Modal auf der Seite, einschließlich der dynamisch erstellten.
• Der Hintergrund überlagert sofort das Modal darunter, was zu einer nahtlosen Stapelung führt.

z-index Berechnung

In Fällen, in denen benutzerdefinierte Z-Index-Werte bevorzugt werden, kann eine alternative Methode zur Berechnung des höchsten Z-Index auf der Seite verwendet werden:

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

Korrektur der Bildlaufleiste

Um potenzielle Probleme beim Scrollen zu beheben, wenn ein Modal über die Browserhöhe hinausgeht, kann ein zusätzliches Skript implementiert werden:

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

Versionskompatibilität

Die vorgestellte Lösung wurde gründlich getestet und bestätigt, dass sie effektiv mit den Bootstrap-Versionen 3.1.0 – 3.3.5 funktioniert.

Das obige ist der detaillierte Inhalt vonWie kann ein korrektes modales Stapeln mit mehreren Modalen in Bootstrap sichergestellt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!