Das Bootstrap-Modal wird im Hintergrund angezeigt

576

Ich habe den Code für mein Modal direkt aus dem Bootstrap-Beispiel verwendet und nur die Datei bootstrap.js (und nicht bootstrap-modal.js) eingefügt. Mein Modal wird jedoch unter der grauen Überblendung (Hintergrund) angezeigt und kann nicht bearbeitet werden.

So sieht es aus:

Modal versteckt sich hinter dem Hintergrund

Sehen Sie diese Geige für einen Weg , um dieses Problem zu reproduzieren. Die Grundstruktur dieses Codes sieht folgendermaßen aus:

<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;
}

Irgendwelche Ideen, warum das so ist oder was ich tun kann, um das zu beheben?

javascript css twitter-bootstrap modal-dialog Natlines
quelle

Für den Fall, dass jemand anderes nach offenen Tags usw. sucht, um herauszufinden, warum dies geschieht, war es für mich die Feedly-Chrome-Erweiterung, die meine Modalitäten kaputt gemacht hat. Durch Deaktivieren der Erweiterung wurde das normale Verhalten wiederhergestellt.

drei

Im Mai war das Problem unter iOS und wurde durch den overflow-x: hiddenauf den Container des Modals angewendeten verursacht .

idmean

1

Erstellt 3 Beispiele in 3 Versionen. 3.3.1 funktioniert gut und die anderen nicht. Version 3.3.1 jsfiddle Version 3.3.5 jsfiddle Version 3.3.6 jsfoddle

Dimitry

1

Das Erstellen eines Fehlerberichts mit dem Bootstrap-Team scheint nicht wirklich ein Fehler zu sein, obwohl es in 3.3.1 gut funktioniert hat. Sie können mehr darüber in dem Link lesen, den ich gepostet habe.

Dimitry

Ein Blog-Beitrag von Relevanz für alle, die mit diesem Problem konfrontiert sind weblog.west-wind.com/posts/2016/Sep/14/…

629

Wenn der modale Container eine feste oder relative Position hat oder sich innerhalb eines Elements mit fester oder relativer Position befindet, tritt dieses Verhalten auf.

Stellen Sie sicher, dass der modale Container und alle übergeordneten Elemente standardmäßig positioniert sind, um das Problem zu beheben.

Hier sind einige Möglichkeiten, dies zu tun:

Am einfachsten ist es, das modale Div so zu verschieben, dass es sich außerhalb von Elementen mit spezieller Positionierung befindet. Ein guter Ort könnte kurz vor dem schließenden Body-Tag sein </body>.
Alternativ können Sie position:CSS-Eigenschaften aus dem Modal und seinen Vorfahren entfernen, bis das Problem behoben ist. Dies kann jedoch das Aussehen und die Funktion der Seite ändern.

Muhd
quelle

24

Guter Fang. Zu Ihrer Information, nicht nur "behoben", die Position "relativ" der Eltern verursacht auch dieses Problem

Giang Nguyen

3

@Muhd Wie stellen Sie sicher, dass es und alle übergeordneten Elemente standardmäßig positioniert sind?

Indago

4

Verwenden Sie lieber die Option 1: "Bewegen Sie das modale Div einfach so, dass es sich außerhalb von Elementen mit spezieller Positionierung befindet." Thx

mpgn

9

Ich verstehe diese Antwort nicht. Die Bootstrap-Beispiele zeigen ein modales Div mit einer Reihe von Klassen entlang der Linie "modal", "modal-fade" usw. Innerhalb von .modal wird die Position festgelegt: fest und innerhalb von "modal-body" wird die Position festgelegt: relativ. Wie wird das Verschieben des Modal-Containers etwas ändern, wenn .modal die Position festlegt: fest?

Carlos

4

Ich habe dieses Problem immer noch. Ich füge es gleich vorher hinzu </body>und bodyhabe keine positionStilattribute. Irgendeine andere Idee?

Tuan Anh Tran

383

Das Problem hat mit der Positionierung der übergeordneten Container zu tun. Sie können Ihr Modal einfach aus diesen Containern "herausziehen", bevor Sie es anzeigen. So geht's, wenn Sie showIhr Modal mit js verwenden:

$('#myModal').appendTo("body").modal('show');

Wenn Sie Modal über Schaltflächen starten, lassen Sie die folgenden Tasten fallen .modal('show');und tun Sie Folgendes :

$('#myModal').appendTo("body")

Dadurch bleiben alle normalen Funktionen erhalten, sodass Sie das Modal mithilfe einer Schaltfläche anzeigen können.

Adam Albright
quelle

12

Verwenden Sie diesen generischen Ereignishandler, damit die @eandrotk-Lösung für alle Modalitäten funktioniert, die Sie auf einer Seite haben können

$('.modal-dialog').parent().on('show.bs.modal', function(e){        $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })

Patrick M.

2

@PatrickM. Tolle! Das funktionierte wie ein Zauber bei einem alten Projekt, das ich übernehme, und sie hatten überall Modalitäten!

Denislexie

5

Dies funktioniert hervorragend, wenn Sie die CSS-Positionierung wirklich nicht korrigieren können. Danke :)

Alexcasalboni

Gibt es einen Grund, warum ich dabei alle CSS-Formatierungen verliere? Und eine einfache Lösung? :-)

Eugene van der Merwe

1

Ändern Sie in der Leandrotk-Antwort einfach #myModal in .modal, um so auszusehen: $ ('. Modal'). AppendTo ("body"). Dies funktioniert mit allen Modalen, da sie ein Standardklassenmodal haben.

Ngatia Frankline

170

Ich habe alle oben angegebenen Optionen ausprobiert, aber mit diesen nicht funktioniert.

Was hat funktioniert: Setzen Sie den Z-Index des .modal-Hintergrunds auf -1.

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

Jan van der Burgt
quelle

10

Dies hat perfekt funktioniert und ist bei weitem die einfachste Lösung. Ich benutztez-index: 0;

andrewcockerham

Kann auch bestätigen, dass nur diese Optionen funktionieren! Vielen Dank!

Fähre Kranenburg

Vielen Dank! Ist das ein Fehler in BS3?

Mauriblint

1

Dies funktioniert nicht, wenn Sie ein Thema mit vielen unterschiedlichen Z-Indizes verwenden. Wenn Sie beispielsweise den Hintergrund so einstellen, -1dass er hinter anderen Elementen auf der Seite angezeigt wird, z. B. Bedienfeldern. Aber 3wenn Sie es so einstellen, dass es über alles außer dem modalen Popup hinausgeht.

Justin Skiles

1

Ich fand dies auch die schnellste Methode, nachdem ich die Vorschläge in den oben bewerteten Antworten erschöpft hatte. In meinem Fall wurde das div mit der Modal-Dialog-Klasse auf einen Z-Index von 1060 gesetzt und vor dem Overlay angezeigt. Wenn Sie die Navigationsleiste verwenden, möchten Sie das Modal über das Overlay bewegen und nicht umgekehrt, da sonst Ihre Navigationsleiste möglicherweise über dem Overlay angezeigt wird ... Chaos-Insues ...

Mike Devenney

152

Stellen Sie außerdem sicher, dass die Versionen von BootStrap css und js identisch sind. Verschiedene Versionen können auch dazu führen, dass Modal im Hintergrund angezeigt wird:

Zum Beispiel:

Schlecht:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Gut:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

Sid
quelle

Das war es auch für mich. Vielen Dank!

PedroTanaka

Hatte gerade das gleiche Problem, die gleiche Version der Stylesheet-Lösung scheint allen geholfen zu haben! Danke

HGB

Vielen Dank, das war mein genaues Problem

Malcor

Malcor keine Probleme, ich habe viel Zeit damit verbracht, diesen Fehler herauszufinden. Wie wir sehen, war das in '14, jetzt ist '16, es gibt immer noch Fehler. Eigentlich ist dies kein Fehler, aber in Bootstrap sollten Autoren dies in ihre Dokumentation aufnehmen oder so ..

Sid

Gleiches gilt hier, wir haben auf die Generierung unseres SASS umgestellt und die js-Datei selbst komplett vergessen. Dies muss die beste Antwort sein. Da unser Modal immer standardmäßig kurz vor dem Body-Close-Tag enthalten ist ...

Angry 84

116

Ich bin auch auf dieses Problem gestoßen und keine der Lösungen hat für mich funktioniert, bis ich herausgefunden habe, dass ich eigentlich keinen Hintergrund brauche. Sie können den Hintergrund einfach mit dem folgenden Code entfernen.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Hinweis : Das data-backdropAttribut muss auf false( andere Optionen : staticoder true) gesetzt werden.

PieterVK
quelle

2

Bei weitem die einfachste Lösung und funktioniert wie ein Zauber!

learning_to_swim

Brillant! Ich musste auch Bootstrap benötigen - ich bin mir nicht sicher, warum alle meine anderen Bootstrap-Funktionen einwandfrei funktionieren, aber ich musste modal funktionieren.

Steve Klein

Perfekt !!! kämpfte für einen Tag ..und du hast meinen anderen Tag gerettet.

Nochmals

1

Nachdem ich alle Lösungen sorgfältig gelesen hatte, fand ich, dass dies ab der heutigen Version von Bootstrap und jQuery die sinnvollste ist. Vielen Dank.

Verschlüsselung

3

Vielen Dank! Diese Frage hat über 140.000 Aufrufe und ich verstehe nicht, warum Bootstrap dies nicht beheben kann. na ja, Prost.

Tschad

58

Ich habe es an der Arbeit durch einen hohen z-Indexwert zu dem modalen Fenster geben AFTER es zu öffnen. Z.B:

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

Andrew Dyster
quelle

Funktioniert es (der Mann sagt es ist), warum stimmen Sie ab? Während ich schaue, scheint es, dass es wird.

Rolice

Ja, kann jemand bitte erklären, warum dies eine schlechte Antwort ist? Ist es nur so, dass es irgendwie hackig ist?

Brandones

6

Ich verstehe die Abstimmungen nicht. Ja, es ist hackig, aber die anderen Lösungen haben bei mir nicht funktioniert, also dachte ich, ich würde dies zu den Leuten beitragen, denen es nichts ausmacht, "hackige" Lösungen zu verwenden, um nur das verdammte Ding zum Laufen zu bringen.

Andrew Dyster

Dies war ein relevanter Einblick in mein spezielles Problem, bei dem ein Modal über ein Vollbildelement gelegt wurde. +1

Jack Stone

3

Es ist eine schlechte Antwort, weil es ein Hack ist und keinen Versuch unternimmt, dies anzuzeigen. Andere Antworten sagen: "Wenn nichts anderes funktioniert, könnten Sie ...". Die Realität ist, dass das Modal im gesamten Web sehr verbreitet ist und bei korrekter Implementierung funktionieren sollte. Hacky Antworten helfen den Leuten nicht dabei, herauszufinden, wie man die Dinge richtig macht.

Lukos

35

Die von @Muhd bereitgestellte Lösung ist der beste Weg, dies zu tun. Wenn Sie jedoch in einer Situation stecken bleiben, in der eine Änderung der Seitenstruktur nicht möglich ist, verwenden Sie diesen Trick:

<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);" , den Standardhintergrund zu entfernen und einen Dummy zu erstellen, indem Sie die Hintergrundfarbe des Dialogfelds selbst mit etwas Alpha festlegen.

Update 1: Wie von @Gustyn hervorgehoben, schließt das Klicken auf den Hintergrund den Dialog nicht wie erwartet. Um dies zu erreichen, müssen Sie Java-Skriptcode hinzufügen. Hier ist ein Beispiel, wie Sie dies erreichen können.

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

Krishnendu
quelle

Dies funktioniert mit der Ausnahme, dass durch Klicken auf den Hintergrund der Dialog nicht wie erwartet geschlossen wird.

Gustyn

Krishnendu du bist mein Held. Ich kam, um mit Untergang und Finsternis zu arbeiten. 3 Tage vor meiner Abschlusspräsentation war es, gelinde gesagt, nervenaufreibend, dieses Problem plötzlich anzugehen. Du mein Freund hast 100000 Upvotes verdient, leider kann ich dir nur eine geben :) Ich wünsche dir einen wundervollen gesegneten Tag.

DotNetBeginner

Wenn ich das versuche, deckt es nicht den gesamten Hintergrund der Seite ab - nur das div-Element, in dem das Modal deklariert ist.

Will Sam

Hat perfekt funktioniert. Vielen Dank!

Gfernandes

Hat perfekt funktioniert. Vielen Dank!

Mayank Pandeyz

16

A aber spät dran aber hier ist eine generische 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 dem Hintergrund, wenn Sie eine feste Seitenleiste für Details verwenden.

Rohan
quelle

Dies war eine perfekte Lösung für ein Wordpress-Plugin, das ich erstellt habe und bei dem ich die übergeordneten Elemente für die Themen anderer Personen nicht steuern konnte.

Mark Rummel

Beste Lösung bisher!

digz6666

10

Eine andere Möglichkeit, dies zu erreichen, besteht darin, den Z-Index aus der .modal-backdropDatei in bootstrap.css zu entfernen . Dadurch befindet sich der Hintergrund auf dem gleichen Niveau wie der Rest Ihres Körpers (er verblasst immer noch) und Ihr Modal befindet sich oben.

.modal-backdrop sieht aus wie das

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

Samuel Bergeron
quelle

10

Fügen Sie einfach zwei Zeilen CSS hinzu:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

Der .modal-Hintergrund sollte einen Wert von 1050 haben, um ihn über der Navigationsleiste festzulegen.

Wahyu Primadi
quelle

Schön, aber wenn der Container der Modals hat, funktioniert position: fixeddas nicht.

CPHPython

10

Dies würde alle Modalitäten abdecken, ohne die Animationen oder das erwartete Verhalten durcheinander zu bringen.

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

Cam Tullos
quelle

1

globale Lösung. Es ist jedoch besser, das Problem zu finden.

Milad Abooali

Ich denke nicht, dass dies eine großartige Lösung ist. Was ist mit Seiten mit vielen Modalitäten? Könnte chaotisch werden.

Glen

Können Sie erklären, wie es chaotisch werden würde? Alles, was es tut, ist, das Modal von seiner aktuellen Position im DOM an das Ende des Body-Tags zu verschieben. Es wird nichts erstellt, was noch nicht vorhanden ist. Es wird nur verschoben und automatisch mit dem oberen Z-Index versehen.

Cam Tullos

Beste Lösung, denke ich. Keine Notwendigkeit,

CSS

8

Ich habe einfach eingestellt:

#myModal {
    z-index: 1500;
}

und es funktioniert....

Für die ursprüngliche Frage:

.my-module {
    z-index: 1500;
}

AmintaCode
quelle

Mein Problem war auch der Z-Index.

James Lock

8

Verwenden Sie dies in Ihrem Modal:

data-backdrop="false"

Jonathan
quelle

8

Dieses Problem kann häufig auftreten, wenn Dinge wie Farbverläufe in CSS für Dinge wie Hintergründe oder sogar Akkordeon-Header verwendet werden.

Leider ist das Ändern oder Überschreiben des Bootstrap-CSS-Kerns unerwünscht und kann zu unerwünschten Nebenwirkungen führen. Der am wenigsten aufdringliche Ansatz ist das Hinzufügen, data-backdrop="false"aber Sie werden möglicherweise feststellen, dass der Überblendungseffekt nicht mehr wie erwartet funktioniert.

Nach den letzten Versionen von Bootstrap scheint Version 3.3.5 dieses Problem ohne unerwünschte Nebenwirkungen zu beheben.

Download: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Stellen Sie sicher, dass Sie die CSS- und JavaScript-Dateien aus 3.3.5 einschließen.

Richard Nalezynski
quelle

6

Hallo, ich hatte das gleiche Problem, dann wurde mir klar, dass bei Verwendung von Bootsrap 3.1 im Gegensatz zu älteren Versionen von Bootsrap (2.3.2) die HTML-Struktur des Modals geändert wurde!

Sie müssen Ihren modalen Kopf- und Fußzeilenbereich mit modalem Dialog und modalem Inhalt umschließen

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

Talsibony
quelle

+1 Stellen Sie sicher, dass Sie kompatible Versionen von bootstrap.css und bootstrap.js verwenden und dass Ihr Markup mit der von Ihnen verwendeten Version übereinstimmt.

Srayner

Ja, das war meine Schlussfolgerung und ich habe es hier geschrieben, nur wenn jemand dieses Problem hatte.

Talsibony

Jesus Christus, diese Antwort ist tief vergraben. Gleicher Fall für Bootstrap 4.

Randell

6

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);
});

Javed Iqbal
quelle

Ich bevorzuge diesen Weg, weil ich die CSS-Formatierung mit den anderen Methoden verloren habe.

Eugene van der Merwe

6

Ich hatte dieses Problem und der einfachste Weg, es zu beheben, war das Hinzufügen eines Z-Index größer als 1040 im Modaldialog div:

<div class="modal-dialog" style="z-index: 1100;">

Ich glaube, Bootstrap erzeugt eine Div-Modal-Hintergrund-Überblendung, in der in meinem Fall der Z-Index 1040 vorhanden ist. Wenn Sie also den Modal-Dialog darüber legen, sollte er nicht mehr grau sein.

Chris Rosete
quelle

6

Ich habe eine leichtere und bessere Lösung.

Es könnte leicht durch einige zusätzliche CSS-Stile gelöst werden.

Klasse ausblenden .modal-backdrop(automatisch aus Bootstrap.js generiert)

.modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

Stellen Sie den Hintergrund .modalauf ein durchscheinendes schwarzes Hintergrundbild ein.

.modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

Dies funktioniert am besten, wenn Sie eine Anforderung haben, bei der sich das Modal innerhalb eines Elements und nicht in der Nähe des </body>Tags befinden muss.

JM Tee
quelle

Du hast meinen Tag gerettet ... Das ist eine schöne Alternative!

Notme

@ Xunga, keine Sorge. Bitte teilen Sie diese Lösung an andere Personen :)

JM Tee

Sie können die Änderungen hier anzeigen

notme

Danke JM, Ihre Lösung war die einzige, die für mich funktioniert hat.

Ahmed J.

5

Setzen Sie den Z-Index .modal auf den höchsten Wert

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

.modal {
    z-index: 1101;
}

Ein Mohudum Kamil
quelle

5

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

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

Erweitern Sie das Snippet

Mit Google Debugger können Sie das Element BACKDROP untersuchen und Attribute ändern. Viel Glück.

Ckevyn Ovalle
quelle

3

in deiner navbar navbar-fixed-topbrauchen z-index = 1041 und auch wenn du bootstarp-combined.min.cssdas auch änderst.navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Mohsin
quelle

3

Ändern Sie die absolute Position in relativ.

.modal-backdrop {
    position: relative;
    /* ... */
}

Aristeu Roriz
quelle

1

es entfernt den schwarzen Hintergrund

HCarrasko

3

Sie können den Z-Index auch aus dem .modal-Hintergrund entfernen. Das resultierende CSS würde so aussehen.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

Matthew Gallegos
quelle

3

Ich habe den modalen Hintergrund entfernt.

.modal-backdrop {
    display:none;
}

Dies ist keine bessere Lösung, funktioniert aber für mich.

CodeBriefly
quelle

3

Was ich finde ist das:

In Bootstrap 3.3.0 ist es nicht richtig, aber in Bootstrap 3.3.5 ist es richtig. Wir sehen den Code. 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)

ttong
quelle

3

Fügen Sie dieses 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>

Takei
quelle

3

Ich wurde behoben, indem ich dem DIV-Tag unten einen Stil hinzufügte

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

Und fügen Sie benutzerdefinierte CSS hinzu

.modal-backdrop {position: relative;}

RaymondLe
quelle

3

$('.modal').insertAfter($('body'));

user109764
quelle

3

Für mich war die einfachste Lösung, mein Modal in einen Wrapper mit einer absoluten Position und einem höheren Z-Index als .modal-Hintergrund zu legen. Da der Modal-Hintergrund (zumindest in meinem Fall) den Z-Index 1050 hat:

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

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

Erweitern Sie das Snippet

sivi911
quelle

Z-Index hat bei mir funktioniert. Vielen Dank.

Asif Iqbal

2

In meinem Fall hatte ich einen Wrapper mit folgendem:

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

Nur den Z-Index entfernt: 1 und keine Ahnung, warum das Problem behoben wurde. Auch das Entfernen der relativen Position hat es sicher getan, aber ich brauchte es.

hsobhy
quelle

Das Bootstrap-Modal wird im Hintergrund angezeigt

Antworten: