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?

6voto

Javed Iqbal Punkte 61

Keine der oben vorgeschlagenen Lösungen hat bei mir funktioniert, aber diese Technik hat das Problem gelöst:

$('#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);
});

5voto

Mohsin Punkte 892

In Ihrer Navigationsleiste navbar-fixed-top brauchen z-index = 1041 und auch wenn Sie bootstarp-combined.min.css die auch ändern .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

5voto

A Mohudum Kamil Punkte 51

Setzen Sie den z-index .modal auf einen Höchstwert

Zum Beispiel, .sidebarwrapper hat einen z-index von 1100, also setzen Sie den z-index von .modal auf 1101

.modal {
    z-index: 1101;
}

5voto

Ckevyn Ovalle Punkte 51

In meinem Fall lösen es, fügen Sie diese in meinem Stylesheet:

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

mit google debugger, kann Element BACKDROP untersuchen und Attribute ändern. Google Glück.

4voto

user109764 Punkte 488
$('.modal').insertAfter($('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