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

Glade Mellor Punkte 1276

Ich habe einfach den Stil position: fixed aus der Datei _modal.scss entfernt, und es scheint für mich gut zu funktionieren. Ich habe immer noch den Hintergrund und es funktioniert wie erwartet.

// Modal background
.modal-backdrop {
  /* commented out position: fixed - bug fix */
  //position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

Ein großes Lob an Rick Strahl für die Anleitung in " Bootstrap Modal Dialog zeigt unter Modal Hintergrund ".

1voto

Nurs Still Punkte 11

Das Hinzufügen dieses Elements in CSS war für mich der Trick.

.modal-backdrop.fade.show{
   z-index:0;
}

1voto

Houdini Sutherland Punkte 1500

VORSICHT BEIM ANHÄNGEN AN DEN KÖRPER!

Damit wird das Modal definitiv aus dem Hintergrund geholt:

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

Dies fügt jedoch bei jedem Öffnen ein weiteres Modal zum Body hinzu, was beim Hinzufügen von Steuerelementen wie Gridviews mit Bearbeitungen und Aktualisierungen in Update-Panels zum Modal zu Kopfschmerzen führen kann. Daher können Sie in Erwägung ziehen, es zu entfernen, wenn das Modal geschlossen wird:

Zum Beispiel:

$(document).on('hidden.bs.modal', function () {
        $('.modal').remove();
    });

entfernt das hinzugefügte Modal. (Das ist natürlich nur ein Beispiel, und Sie möchten vielleicht einen anderen Klassennamen verwenden, den Sie dem Modal hinzugefügt haben).

Und wie bereits von anderen erwähnt; Sie können einfach den Hintergrund des Modals ausschalten (data-backdrop="false"), oder wenn Sie nicht ohne die Verdunkelung des Bildschirms leben können, können Sie die .modal-backdrop css-Klasse anpassen (entweder Erhöhung des z-index).

1voto

Jeong-min Im Punkte 61

Ich hatte das gleiche Problem und habe auch die Antwort von Muhd gelesen.

Aber mein Modal braucht links, oben Attribut, so ändern Sie einfach feste Position auf absolute und es funktioniert.

.modal {
    position: absolute;
}

1voto

user2489259 Punkte 29

Sie können das Problem umgehen, aber dadurch wird die Überblendung auf der gesamten Seite entfernt. Das Modal wird wie Facebook-Popups erscheinen. Nach dem Öffnen des Modals versuchen Sie es:

 $('.modal-backdrop').removeClass('modal-backdrop');

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