Wie kann sichergestellt werden, dass sich mehrere Modalitäten in Bootstrap in der richtigen Reihenfolge überlagern?

So überlagern Sie mehrere Modalitäten in der richtigen Reihenfolge

In bestimmten Szenarien ist es notwendig, mehrere Modalitäten auf derselben Seite anzuzeigen. Es kann jedoch eine Herausforderung sein, sicherzustellen, dass jedes Modal über dem vorherigen angezeigt wird. In diesem Artikel wird eine Lösung zum Überlagern von Modalen in der richtigen Reihenfolge untersucht, insbesondere wenn mehr als zwei Modalitäten beteiligt sind.

Einrichtung

Im angegebenen Codeausschnitt sind mehrere Modalitäten ( „#myModal“ und „#myModal2“) sind so programmiert, dass sie über Tastenereignisse gestartet werden. Das Problem liegt darin, wie das Modal „#myModal2“ hinter dem Modal „#myModal“ angezeigt wird, anstatt es zu überlagern.

Lösung

Die Lösung dreht sich um die Erstellung eines JavaScript-Funktion, die den Z-Index von Modalen und ihren Hintergründen effizient verwaltet. Diese im Folgenden erläuterte Funktion erreicht das gewünschte Verhalten durch Implementierung der folgenden Schritte:

1. Backdrop Z-Index Fix:

   • A Die setTimeout-Funktion wird verwendet, um die Verzögerung bei der Erstellung des .modal-backdrop-Elements zu beheben.
   • Wenn jedes Modal sichtbar wird, wird sein Z-Index schrittweise erhöht, um sicherzustellen, dass es das vorherige Modal überlagert.
   • Der Z-Index von .modal-backdrop ist auf einen Wert kleiner als der Z-Index des Modals eingestellt, sodass er als Hintergrund für das Modal dienen kann, ohne es zu verdecken.

2. Scrollbar-Fix:

   • Wenn ein Modal geschlossen wird, das die Browserhöhe überschreitet, wird das Scrollen innerhalb der sichtbaren Modals darunter deaktiviert. Um dies zu beheben, wird beim Ausblenden eines Modals eine Funktion ausgeführt, die das Scrollen wieder ermöglicht, indem die Modal-Open-Klasse im Body-Element der Seite beibehalten wird.

Code-Snippet

<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'));
});

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

Fazit

Durch die Implementierung dieser Lösung wird sichergestellt, dass sich mehrere Modale in der richtigen Reihenfolge überlagern, wobei der Hintergrund stets hinter dem aktiven Modal erscheint. Diese Technik wurde getestet und funktioniert effektiv für die Bootstrap-Versionen 3.1.0 bis 3.3.5.

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