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?

775voto

Muhd Punkte 22319

Wenn der modale Container eine feste oder relative Position hat oder sich innerhalb eines Elements mit fester oder relativer Position befindet, tritt dieses Verhalten auf.

Stellen Sie sicher, dass der modale Container und alle übergeordneten Elemente standardmäßig positioniert sind, um das Problem zu beheben.

Hier sind einige Möglichkeiten, dies zu tun:

  1. Am einfachsten ist es, das modale Div so zu verschieben, dass es sich außerhalb von Elementen mit spezieller Positionierung befindet. Ein guter Platz könnte kurz vor dem schließenden Body-Tag sein </body> .
  2. Alternativ können Sie auch die position: CSS-Eigenschaften aus dem Modal und seinen Vorgängern, bis das Problem verschwunden ist. Dies kann jedoch das Aussehen und die Funktionen der Seite verändern.

482voto

Adam Albright Punkte 5699

Das Problem hat mit der Positionierung der übergeordneten Container zu tun. Sie können Ihr Modal leicht aus diesen Containern "herausziehen", bevor Sie es anzeigen. Hier ist, wie Sie es tun, wenn Sie waren show Ihr Modal mit js zu erstellen:

$('#myModal').appendTo("body").modal('show');

Wenn Sie das Modal über Schaltflächen starten, lassen Sie die .modal('show'); und einfach tun:

$('#myModal').appendTo("body") 

Dadurch werden alle normalen Funktionen beibehalten und Sie können das Modal über eine Schaltfläche anzeigen.

196voto

Jan van der Burgt Punkte 2061

Ich habe alle oben genannten Optionen ausprobiert, aber es hat damit nicht geklappt.

Was funktioniert hat: Einstellung des z-index von .modal-backdrop auf -1.

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

152voto

Sid Punkte 3994

Stellen Sie außerdem sicher, dass die Versionen von BootStrap css und js die gleichen sind. Unterschiedliche Versionen können auch dazu führen, dass das Modal im Hintergrund angezeigt wird:

Zum Beispiel:

Schlecht:

<link href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Gut:

<link href="http://stackoverflow.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

128voto

PieterVK Punkte 1463

Ich bin auch auf dieses Problem gestoßen und keine der Lösungen hat bei mir funktioniert, bis ich herausgefunden habe, dass ich eigentlich keinen Hintergrund brauche. Sie können den Hintergrund mit folgendem Code leicht entfernen.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Hinweis : die data-backdrop muss das Attribut auf false ( andere Optionen : static o true ).

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