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?

1voto

Aristeu Roriz Punkte 19

Ändern Sie die absolute Position in eine relative.

.modal-backdrop {
    position: relative;
    /* ... */
}

1voto

user28864 Punkte 3205

Dieses Verhalten tritt manchmal auf, wenn es ein nicht geschlossenes Tag gibt, insbesondere ein nicht geschlossenes </div> . Sie können überprüfen, wo sich Ihr Modal befindet, und sicherstellen, dass alle Tags ordnungsgemäß geschlossen sind, oder noch besser, das Div-Modal näher an den unteren Rand der Seite verschieben, unmittelbar vor </body> Tag-Gehäuse

0voto

wefra Punkte 25

Versuchen Sie, die Klasse zu überschreiben .modal-open Überlaufwert von hidden a visible :

.modal-open {
    overflow: visible;
}

0voto

Sadmi Punkte 301

Wie aus den vorangegangenen Antworten hervorgeht, kann dies aus verschiedenen Gründen geschehen. Bei mir lag das Problem darin, dass ich auf zwei verschiedene Bootstrap-Links verwiesen habe, ohne es zu wissen, so dass das Entfernen eines Links das Problem gelöst hat.

In meinem Fall habe ich das hier mit einbezogen:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

und eine weitere Offline-Version, die ich bereits auf meinem Laptop habe.

0voto

Toof_LD Punkte 64

Ich stieß auf dieses Problem bei der Verwendung mit Angular 14, und ich gelöst mit Änderung .modal-backdrop , von Position: fest; a Position: relativ;

::ng-deep.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: relative;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

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