Wie kann sichergestellt werden, dass sich mehrere Modalitäten korrekt mit einem sichtbaren Hintergrund in Bootstrap überlagern?

Mehrere Modale überlagern sich

In diesem Szenario möchten Sie, dass die Überlagerung über dem ersten Modal und nicht dahinter erscheint.

Lösung

Inspiriert durch Beiträge von @YermoLamers und @Ketwaroo umfasst eine umfassende Lösung:

Backdrop Z-Index Fix

Um das Problem zu lösen, dass der Hintergrund hinter dem ersten Modal erscheint, implementieren Sie das folgende JavaScript:

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

Z-Index-Anpassung

Wenn Sie möchten Um die Z-Index-Berechnung anzupassen, können Sie Folgendes verwenden:

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

Scrollbar Fix

Um Fälle zu beheben, in denen das Schließen eines zweiten Modals das Scrollen in einem Modal verhindert das die Browserhöhe überschreitet, schließen Sie das folgende JavaScript ein:

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

Versionen

Diese Lösung wurde gründlich mit den Bootstrap-Versionen 3.1.0 bis 3.3.5 getestet. Durch die Implementierung dieser Lösung können Sie sicherstellen, dass sich mehrere Modals korrekt überlagern, wobei der Hintergrund über dem ersten Modal angezeigt wird und die Bildlaufleiste bei Bedarf funktionsfähig bleibt.

Das obige ist der detaillierte Inhalt vonWie kann sichergestellt werden, dass sich mehrere Modalitäten korrekt mit einem sichtbaren Hintergrund in Bootstrap überlagern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!