Bootstrap Modal erscheint unter dem Hintergrund

Question

Bootstrap Modal erscheint unter dem Hintergrund

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

67voto

Andrew Dyster Punkte 2238

Ich habe es zum Funktionieren gebracht, indem ich dem modalen Fenster einen hohen z-Index-Wert zugewiesen habe NACH es zu öffnen. Z.B.:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

Beantwortet el 12 de Dezember, 2012 von Andrew Dyster (2238 Punkte )

Answer 3

46voto

Krishnendu Punkte 1229

Die von @Muhd vorgeschlagene Lösung ist der beste Weg, dies zu tun. Wenn Sie sich jedoch in einer Situation befinden, in der eine Änderung der Seitenstruktur nicht möglich ist, können Sie diesen Trick anwenden:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Der Trick dabei ist data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" indem Sie den Standardhintergrund entfernen und einen Dummy-Hintergrund erstellen, indem Sie die Hintergrundfarbe des Dialogs selbst mit etwas Alpha einstellen.

Aktualisierung 1: Wie von @Gustyn bemerkt, schließt ein Klick auf den Hintergrund den Dialog nicht wie erwartet. Um das zu erreichen, müssen Sie also etwas Java-Script-Code hinzufügen. Hier ist ein Beispiel, wie Sie dies erreichen können.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

Beantwortet el 28 de August, 2015 von Krishnendu (1229 Punkte )

Answer 4

30voto

anon123 Punkte 369

Die einfachste Lösung, die ich gefunden habe und die für alle funktioniert meine Fälle, war eine Antwort in einem ähnlichen Beitrag :

Hier ist sie:

.modal {
  background: rgba(0, 0, 0, 0.5); 
}
.modal-backdrop {
  display: none;
}

Im Grunde genommen wird die ursprüngliche Kulisse nicht verwendet. Stattdessen verwenden Sie das Modal als Hintergrund. Das Ergebnis ist, dass es genauso aussieht und sich genauso verhält wie das Original. Es vermeidet alle Probleme mit z-indexes (für mich ändern z-index auf 0 löste das Problem, aber erstellt ein neues Problem mit meinem Navigationsmenü zwischen dem Modal und Hintergrund) und ist einfach.

Der Dank geht an @Jevin O. Sewaruth für die Veröffentlichung der ursprünglichen Antwort.

Beantwortet el 10 de Juli, 2020 von anon123 (369 Punkte )

Answer 5

22voto

Cam Tullos Punkte 2427

Dies würde alle Modals abdecken, ohne die Animationen oder das erwartete Verhalten zu stören.

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

Beantwortet el 5 de August, 2017 von Cam Tullos (2427 Punkte )

Answer 6

16voto

Rohan Punkte 3246

Etwas spät, aber hier ist eine allgemeine Lösung -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Besuchen Sie diesen Link - Bootstrap 3 - Modal verschwindet unter Hintergrund bei Verwendung einer festen Seitenleiste für Einzelheiten.

Beantwortet el 15 de Januar, 2014 von Rohan (3246 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: