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?

8voto

JM Tee Punkte 121

Ich habe eine leichtere und bessere Lösung.

Es könnte leicht durch einige zusätzliche CSS-Stile gelöst werden.

  1. die Klasse ausblenden .modal-backdrop (automatisch generiert aus Bootstrap.js)

    .modal-backdrop
    {
    display:none;
    visibility:hidden; 
    position:relative
    }
  2. den Hintergrund von .modal auf ein durchscheinendes schwarzes Hintergrundbild.

    .modal
    {
    background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
    // translucent image from google images 
    z-index:1100; 
    }

Dies funktioniert am besten, wenn Sie eine Anforderung haben, die erfordert, dass das Modal innerhalb eines Elements und nicht in der Nähe der </body> Tag..

8voto

Dieses Problem tritt häufig bei der Verwendung von Farbverläufen in CSS auf, z. B. für Hintergründe oder sogar Akkordeon-Header.

Leider ist das Ändern oder Überschreiben des Bootstrap-Kern-CSS unerwünscht und kann zu unerwünschten Nebeneffekten führen. Der am wenigsten einschneidende Ansatz ist das Hinzufügen von data-backdrop="false" aber Sie werden feststellen, dass der Überblendeffekt nicht mehr wie erwartet funktioniert.

Nachdem ich die letzten Versionen von Bootstrap verfolgt habe, scheint Version 3.3.5 dieses Problem ohne unerwünschte Nebeneffekte zu beheben.

Herunterladen: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Stellen Sie sicher, dass Sie die CSS- und JavaScript-Dateien aus 3.3.5 einbeziehen.

8voto

Jonathan Punkte 2455

Verwenden Sie dies in Ihrem Modal:

data-backdrop="false"

7voto

talsibony Punkte 7888

Hallo, ich hatte das gleiche Problem, dann merke ich, dass, wenn Sie mit bootsrap 3.1 Anders als in älteren Versionen von bootsrap (2.3.2) die html-Struktur des Modals wurde geändert!

Sie müssen Ihre modale Kopf- und Fußzeile mit modal-dialog und modal-content umhüllen

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

6voto

Chris Rosete Punkte 1220

Ich hatte dieses Problem und der einfachste Weg, um es zu beheben war addind z-index größer als 1040 auf dem modal-Dialog div:

<div class="modal-dialog" style="z-index: 1100;">

Ich glaube, Bootstrap erstellen ein div modal-backdrop fade in die in meinem Fall hat die z-index 1040, so dass, wenn Sie die modal-Dialog oben auf diese setzen, sollte es nicht mehr grau sein.

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