Bootstrap Modal erscheint unter dem Hintergrund

Question

Bootstrap Modal erscheint unter dem Hintergrund

Gefragt el 17 de Kann, 2012: Wann wurde die Frage gestellt
521419 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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?

Gefragt el 17 de Kann, 2012 von natlines

Answer 1

5 Antworten

Answer 2

2voto

hsobhy Punkte 1453

In meinem Fall hatte ich einen Wrapper mit folgendem Inhalt:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Nur entfernt die z-index:1 und haben keine Ahnung, warum das Problem behoben. auch sicher das Entfernen der relativen Position tat, aber ich brauchte es.

Beantwortet el 21 de Marsch, 2014 von hsobhy (1453 Punkte )

Answer 3

1voto

Nabeel Punkte 731

Die Lösung besteht darin, das Modal direkt unter die body Tag. Wenn das aus irgendeinem Grund nicht möglich ist, fügen Sie einfach ein overflow: visible an das Tag, das das Modal umschließt, oder verwenden Sie den folgenden Code:

<script>
    $(document).on('show.bs.modal', '.modal', function () {
        $('.div-wrapper-for-modal').css('overflow', 'visible');
    });

    $(document).on('hide.bs.modal', '.modal', function () {
        $('.div-wrapper-for-modal').css('overflow', 'auto');
    });
</script>
<div class="div-wrapper-for-modal">
    <div class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Modal header</h3>
        </div>
        <div class="modal-body">
            <p>One fine body…</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>
</div>

Beantwortet el 16 de September, 2019 von Nabeel (731 Punkte )

Answer 4

1voto

Mugasho Lincoln Punkte 33

Überprüfen Sie Ihr css, um zu sehen, ob Sie irgendwelche Unschärfen und Filter haben. Ich habe diesen Code aus meinem CSS entfernt und das Modal funktionierte wieder normal

.modal-open .main-wrapper {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    filter: blur(1px);
}

Beantwortet el 13 de August, 2020 von Mugasho Lincoln (33 Punkte )

Answer 5

1voto

Mo. Punkte 23681

Ich hatte ein ähnliches Problem nur bei iOS-Geräten.

Die Lösung lag in der Entfernung -webkit-overflow-scrolling: touch von Eltern Element

Beantwortet el 12 de April, 2019 von Mo. (23681 Punkte )

Answer 6

1voto

Július Ľuptovec Punkte 307

Mit

transform:translate3d(0, 0, 0);

Bei einem beliebigen Vorgängerelement kann dies ebenfalls der Fall sein. Getestet auf Bootstrap 4.6.0.

Beantwortet el 5 de Februar, 2021 von Július Ľuptovec (307 Punkte )

Bootstrap Modal erscheint unter dem Hintergrund

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Bootstrap Modal erscheint unter dem Hintergrund

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: