Warum erscheint mein Bootstrap-Modal hinter der Hintergrundüberlagerung?

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:

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

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:

1. Modal außerhalb positionierter Elemente verschieben:

   • Verschieben Sie das modale Div mit Special außerhalb aller Elemente Positionierung (z. B. vor dem schließenden

Das obige ist der detaillierte Inhalt vonWarum erscheint mein Bootstrap-Modal hinter der Hintergrundüberlagerung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!