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?

4voto

Dapeng114 Punkte 207

Das hat bei mir funktioniert:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

3voto

sivi911 Punkte 291

Für mich war die einfachste Lösung, mein Modal in einen Wrapper mit absoluter Position und z-index höher als .modal-backdrop zu setzen. Da modal-backdrop (zumindest in meinem Fall) hat z-index 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}

<div class="my-modal-wrapper"></div>

3voto

Takei Punkte 31

Fügen Sie dies zu Ihren Seiten hinzu. Es funktioniert für mich.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>

3voto

RaymondLe Punkte 147

Ich habe das Problem behoben, indem ich dem DIV-Tag den folgenden Stil hinzugefügt habe

style="background-color: rgba(0, 0, 0, 0.5);"

Und benutzerdefiniertes Css hinzufügen

.modal-backdrop {position: relative;}

3voto

ttong Punkte 31

Was ich feststelle ist, dass:

in Bootstrap 3.3.0 ist es nicht richtig, aber wenn in Bootstrap 3.3.5 ist es richtig.Lassen Sie uns den Code zu sehen. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

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