Bootstrap Modal erscheint unter dem Hintergrund

Question

Bootstrap Modal erscheint unter dem Hintergrund

Gefragt el 17 de Kann, 2012: Wann wurde die Frage gestellt
521414 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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?

Gefragt el 17 de Kann, 2012 von natlines

Answer 1

5 Antworten

Answer 2

11voto

Samuel Bergeron Punkte 101

Eine andere Möglichkeit besteht darin, den z-index aus der .modal-backdrop in bootstrap.css. Dies wird dazu führen, dass der Hintergrund auf der gleichen Ebene wie der Rest des Körpers (es wird immer noch verblassen) und Ihr Modal an der Spitze zu sein.

.modal-backdrop sieht so aus

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

Beantwortet el 26 de November, 2014 von Samuel Bergeron (101 Punkte )

Answer 3

11voto

Wahyu Primadi Punkte 119

Fügen Sie einfach zwei CSS-Zeilen hinzu:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

Das .modal-backdrop sollte den Wert 1050 haben, um es über die Navbar zu setzen.

Beantwortet el 28 de Kann, 2016 von Wahyu Primadi (119 Punkte )

Answer 4

9voto

AmintaCode Punkte 364

Ich habe einfach eingestellt:

#myModal {
    z-index: 1500;
}

und es funktioniert....

Zur ursprünglichen Frage:

.my-module {
    z-index: 1500;
}

Beantwortet el 12 de Februar, 2015 von AmintaCode (364 Punkte )

Answer 5

9voto

Praneeth Pj Punkte 303

Ich habe mein Problem gelöst, indem ich Folgendes hinzugefügt habe data-backdrop="false" zur div:

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

.....

Beantwortet el 21 de Kann, 2020 von Praneeth Pj (303 Punkte )

Answer 6

9voto

quent Punkte 1700

Die einfachste Lösung ist, den modalen Dialog außerhalb eines Containers zu platzieren und ihn einfach unter der <body> Element:

<body>    
    <div>
        ...
    <div>

    <div class="modal">
        ... modal dialog here
    </div>
</body>

Ich habe diese Lösung ausprobiert und sie funktioniert bei mir.

Quelle: https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

Beantwortet el 25 de September, 2021 von quent (1700 Punkte )

Bootstrap Modal erscheint unter dem Hintergrund

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Bootstrap Modal erscheint unter dem Hintergrund

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: