Heim >Web-Frontend >CSS-Tutorial >Warum erscheint mein Bootstrap-Modal hinter der Hintergrundüberlagerung?
Warum erscheint mein Bootstrap-Modal hinter der Hintergrundüberlagerung?
- Linda HamiltonOriginal
- 2024-12-19 18:56:10895Durchsuche
Bootstrap-Modal im Hintergrund versteckt
Problem:
Obwohl die offizielle Bootstrap-Dokumentation befolgt wurde, Unter der Hintergrundüberlagerung erscheint ein Modal, das verhindert Interaktion.
Reproduzieren des Problems:
Der Code zum Reproduzieren des Problems ähnelt dem folgenden Beispiel:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
Root Ursache:
Der modale Container (mit der Klasse „fade“) kann ausgeblendet werden, wenn er eine hat Nicht standardmäßige Position, z. B. fest oder relativ. Dieses Problem tritt auf, wenn der Modalcontainer oder seine übergeordneten Elemente unterschiedlich positioniert sind.
Lösung:
Um das Problem zu beheben, stellen Sie sicher, dass der Modalcontainer und seine übergeordneten Elemente unterschiedlich positioniert sind die Standardposition. Es gibt zwei Ansätze, um dies zu erreichen:
-
Modal außerhalb positionierter Elemente verschieben:
- Verschieben Sie das modale Div mit Special außerhalb aller Elemente Positionierung (z. B. vor dem schließenden