Bootstrap Modal erscheint unter dem Hintergrund

Question

Bootstrap Modal erscheint unter dem Hintergrund

Gefragt el 17 de Kann, 2012: Wann wurde die Frage gestellt
521422 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

0voto

Laurent Lyaudet Punkte 124

In meinem Fall war die Lösung einfach, dass ich vergessen habe, die Klasse "modal" auf dem div mit der id "my-modal" hinzuzufügen, das von $('#my-modal').modal('show');

Da der Inhalt des Divs alles enthielt, was erforderlich war, war das Ergebnis auf dem Bildschirm fast perfekt, abgesehen von dem Overlay oben.

Ich würde wetten, dass die anderen Antworten mit z-index Trick oder andere CSS-Tricks, die nicht über die Positionierung von übergeordneten divs oder unclosed divs wurden in diesem Fall auch gewesen sein kann.

Beantwortet el 25 de Marsch, 2022 von Laurent Lyaudet (124 Punkte )

Answer 3

0voto

thanos_zach Punkte 156

.modal-backdrop {
/* bug fix - no overlay */    
display: none;}

Beantwortet el 7 de Juni, 2020 von thanos_zach (156 Punkte )

Answer 4

0voto

xadun Punkte 146

Für diejenigen, die wie ich Folgendes hinzugefügt haben Bootstrap a Wordpress ohne die Verwendung eines Plugins oder Themas:

Ich habe Bootstrap hinzugefügt CSS y JS im function.php Datei. Dann rief ich das Modal in einer Wordpress-Seite auf. Egal was ich tat, die .modal-backdrop war immer vor der #mymodal . Ich fand heraus, dass es sich um eine z-index Problem, sondern, da #mymodal wurde innerhalb der content div y .modal-backdrop am Ende von <body> z-index konnte nicht funktionieren. Was ich tat, war bewegen #mymodal an das Ende von as well, nachdem es erzeugt wurde:

$(document).ready(function () {
   $('#mymodal').on('shown.bs.modal', function () {
       $('#mymodal').appendTo(document.body);
     })
});

Übrigens, ich musste hinzufügen shown.bs.modal innerhalb $(document).ready weil sie nicht aufgerufen wurde, als ich die Taste drückte.

Beantwortet el 5 de Juni, 2020 von xadun (146 Punkte )

Answer 5

0voto

NicK Kamimura Punkte 1

Ich hatte ein solches Problem auf Iphone und Ipad mit Sharepoint 2013 Modale Bootstrap halten z-index Probleme mit Hintergrund.

Ich verwende dies nur bei JS:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

Beantwortet el 8 de Juni, 2017 von NicK Kamimura (1 Punkte )

Answer 6

0voto

kunal kumar Punkte 1

function addclassName(){
    setTimeout(function(){
        var c = document.querySelectorAll(".modal-backdrop");
        for (var i = 0; i < c.length; i++) {
            c[i].style.zIndex =  1040 + i * 20  ;
        }
        var d = document.querySelectorAll(".modal.fade");
        for(var i = 0; i<d.length; i++){
            d[i].style.zIndex = 1050 + i * 20;
        }
    }, 10);
}

Beantwortet el 29 de August, 2017 von kunal kumar (1 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: