713 Stimmen

Bootstrap Modal erscheint unter dem Hintergrund

Ich habe den Code für mein Modal direkt aus dem Bootstrap-Beispiel übernommen und nur die bootstrap.js (und nicht bootstrap-modal.js) eingebunden. Allerdings erscheint mein Modal unter dem grauen Fade (Hintergrund) und ist nicht bearbeitbar.

So sieht es aus:

modal hiding behind backdrop

Voir diese Fiedel für 一つ Möglichkeit, dieses Problem zu reproduzieren. Die Grundstruktur des Codes ist wie folgt:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

Haben Sie eine Idee, woran das liegt oder was ich tun kann, um das Problem zu beheben?

3voto

RaymondLe Punkte 147

Ich habe das Problem behoben, indem ich dem DIV-Tag den folgenden Stil hinzugefügt habe

style="background-color: rgba(0, 0, 0, 0.5);"

Und benutzerdefiniertes Css hinzufügen

.modal-backdrop {position: relative;}

3voto

sivi911 Punkte 291

Für mich war die einfachste Lösung, mein Modal in einen Wrapper mit absoluter Position und z-index höher als .modal-backdrop zu setzen. Da modal-backdrop (zumindest in meinem Fall) hat z-index 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}

<div class="my-modal-wrapper"></div>

3voto

Duncan Kishira Punkte 33

Ich bin meinen HTML-Code durchgegangen und habe festgestellt, dass ich eine nicht geschlossene <div> Tag. Das Schließen der <div> hat das Problem für mich gelöst. PS: Die <div> Tag weder ein Vorläufer noch ein Kind des Modals war.

2voto

James Nielson Punkte 39

Wie Davide Lorigliola habe ich das Problem behoben, indem ich den Z-Index erhöht habe:

.modal-backdrop { z-index: -999999; }

2voto

xLanUserx Punkte 63

In meinem Fall war die Ursache boostrap.min.css. Sobald ich sie als Referenz aus meiner HTML-Datei ausgeschlossen hatte, wurde der Dialog vor dem modalen Schatten angezeigt.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X