it-swarm.com.de

Bootstrap Modal, das unter dem Hintergrund angezeigt wird

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

So sieht es aus:

modal hiding behind backdrop

Siehe 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?

539
natlines

Wenn der modale Container eine feste oder relative Position hat oder sich in einem Element mit fester oder relativer Position befindet, tritt dieses Verhalten auf.

Stellen Sie sicher, dass der modale Container und alle übergeordneten Elemente auf die Standardposition eingestellt sind, um das Problem zu beheben.

Hier sind ein paar Möglichkeiten, dies zu tun:

  1. Am einfachsten ist es, das modale Div so zu verschieben, dass es sich außerhalb von Elementen mit spezieller Positionierung befindet. Ein guter Platz könnte kurz vor dem schließenden Body-Tag </body> sein.
  2. 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.
588
Muhd

Das Problem liegt in der Positionierung der übergeordneten Container. Sie können Ihr Modal einfach aus diesen Containern "herausbewegen", bevor Sie es anzeigen. So wird es gemacht, wenn Sie Ihr Modal mit js showing:

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

Oder, wenn Sie modal mit den Tasten starten, lassen Sie das .modal('show'); fallen und führen Sie einfach Folgendes aus:

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

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

345
Adam Albright

Ich habe alle oben aufgeführten Optionen ausprobiert, konnte sie jedoch nicht verwenden.

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

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

Stellen Sie außerdem sicher, dass die Versionen von BootStrap css und js identisch sind. Verschiedene Versionen können auch Modal unter dem Hintergrund erscheinen lassen:

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>
149
Sid

Ich bin auch auf dieses Problem gestoßen und keine der Lösungen hat für mich funktioniert, bis ich herausgefunden habe, dass ich tatsächlich keinen Hintergrund brauche. Sie können den Hintergrund mit dem folgenden Code leicht 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-backdrop -Attribut muss auf false ( andere Optionen : static oder true).

105
PieterVK

Ich habe es zum Laufen gebracht, indem ich dem modalen Fenster einen hohen Z-Index-Wert gegeben habe NACH Öffnen. Z.B.:

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

Die von @Muhd bereitgestellte 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, 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);" durch Entfernen des Standardhintergrunds und Erstellen eines Dummy-Hintergrunds, indem die Hintergrundfarbe des Dialogfelds selbst mit etwas Alpha festgelegt wird.

pdate 1: Wie von @Gustyn hervorgehoben, schließt ein Klick 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');
});
30
Krishnendu

A aber zu spät, 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 verwenden für Details.

15
Rohan

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, damit er über der Navigationsleiste angezeigt wird.

10
Wahyu Primadi

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

.modal-backdrop sieht so aus

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

Ich habe einfach eingestellt:

#myModal {
    z-index: 1500;
}

und es funktioniert....

Für die ursprüngliche Frage:

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

Dieses Problem tritt häufig auf, wenn Sie in CSS beispielsweise Verläufe für Hintergründe oder sogar Akkordeonüberschriften verwenden.

Leider ist das Ändern oder Überschreiben von core Bootstrap CSS unerwünscht und kann zu unerwünschten Nebenwirkungen führen. Der am wenigsten aufdringliche Ansatz besteht darin, data-backdrop="false" hinzuzufügen. Möglicherweise stellen Sie jedoch fest, dass der Überblendungseffekt nicht mehr wie erwartet funktioniert.

Nach den jüngsten 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.

7

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

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

Ich glaube, dass bootstrap eine div-Modal-Hintergrund-Überblendung erzeugt, in der in meinem Fall der Z-Index 1040 steht. Wenn Sie also den Modal-Dialog darüber setzen, sollte er nicht mehr grau sein.

6
Chris Rosete

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');
});
6
Cam Tullos

Hallo, ich hatte das gleiche Problem, als mir klar wurde, 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ßbereich mit modalen Dialogen und modalen Inhalten 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>
6
talsibony

Fügen Sie in meinem Fall Folgendes in mein Stylesheet ein:

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

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

5
Ckevyn Ovalle

Ich habe eine leichtere und bessere Lösung.

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

  1. verstecke die Klasse .modal-backdrop (automatisch generiert aus Bootstrap.js)

    .modal-backdrop
    {
    display:none;
    visibility:hidden; 
    position:relative
    }
    
  2. stellen Sie den Hintergrund von .modal auf 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 in einem Element und nicht in der Nähe des </body> -Tags befinden muss.

5
JM Tee

Verwenden Sie dies in Ihrem Modal:

data-backdrop="false" 
5
Jonathan

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

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

.modal {
    z-index: 1101;
}
5
A Mohudum Kamil

keine der oben vorgeschlagenen Lösungen hat für mich 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);
}); 
5
Javed Iqbal

Ich habe dieses Problem behoben, indem ich dem DIV-Tag den folgenden Stil hinzugefügt habe

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

Und fügen Sie benutzerdefinierte CSS

.modal-backdrop {position: relative;}
3
RaymondLe
$('.modal').insertAfter($('body'));
3
user109764

Ändern Sie die absolute Position in relative.

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

Ich entfernte modale Kulisse.

.modal-backdrop {
    display:none;
}

Das ist keine bessere Lösung, funktioniert aber bei mir.

3
CodeBriefly

in deiner navbar _navbar-fixed-top_ brauche _z-index = 1041_ und auch wenn du _bootstarp-combined.min.css_ verwendest _.navbar-fixed-top, .navbar-fixed-bottomz-index to 1041_

3
Mohsin

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

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

was ich finde ist das:

in bootstrap 3.3.0 ist es nicht richtig, aber wenn in bootstrap 3.3.5 es richtig ist, sehen Sie 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)
3
ttong

In meinem Fall hatte ich einen Wrapper mit den folgenden Angaben:

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

Entfernte nur den Z-Index: 1 und habe keine Ahnung, warum das Problem behoben wurde. Auch das Entfernen der relativen Position war sicher, aber ich brauchte es.

2
hsobhy

Das hat bei mir funktioniert:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)
2
Dapeng114

In meinem Fall war die Ursache bootstrap.min.css :) Sobald ich es aus meiner HTML-Datei als Referenz ausgeschlossen habe, wird der Dialog in Form der modalen Schattierung angezeigt :)

2
xLanUserx

Fügen Sie diesen zu Ihren Seiten hinzu. Es funktioniert bei mir.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
2
Takei

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

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
2
sivi911

versuchen Sie, den Wert der Klasse .modal-open overflow von hidden nach visible zu überschreiben.

.modal-open {
    overflow: visible;
}
1
wefra

Probieren Sie dies aus https://github.com/nakupanda/bootstrap3-dialog/releases/tag/v1.34.

Bootstrap Modal 3.3.0 generiert den modalen Hintergrund innerhalb des Hauptelements, während er zuvor an das Hauptelement angehängt wurde.

Hoffe das hilft.

1
Nakupanda

Wie Davide Lorigliola habe ich es durch Anheben des Z-Index behoben: .modal-backdrop {Z-Index: -999999; }

Leider ist S.O. verbietet es mir, seine zu kommentieren oder zu erhöhen, daher bin ich gezwungen, dies hier in einer weiteren Lösung zu sagen.

1
James Nielson

Ich hatte das gleiche Problem und überprüfe auch Muhds Antwort.

Aber, meine modale Bedürfnisse links, Top-Attribut, so ändern Sie einfach die feste Position in absolut und es hat funktioniert.

.modal {
    position: absolute;
}
1
Jeong-min Im

Dieses Verhalten tritt manchmal auf, wenn es ein nicht geschlossenes Tag gibt, insbesondere ein nicht geschlossenes </div>. Sie können überprüfen, wo sich Ihr Modal befindet, und sicherstellen, dass alle Tags ordnungsgemäß geschlossen sind oder besser, und das div-Modal unmittelbar vor </body> Tag Enclosure näher an den unteren Rand der Seite verschieben

1
user28864

Versuchen Sie diesen Code zu CSS.

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }

Ex:

    $(window).on('load', function() {
      
/* Latest compiled and minified JavaScript included as External Resource */
$(document).ready(function() { $('.modal').modal("show"); });

    });
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid red;
}

.modal-open { overflow: hidden !important; }
.modal-open *{ position:unset; z-index: 0; }
.modal-open .modal-backdrop { position: fixed; z-index: 99998 !important; }
.modal-open .modal { position: fixed; z-index: 99999 !important; }
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Bootstrap 3 Template</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/normalize.css">

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">


</head>
<body class="modal-open">
    <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et augue sed lorem laoreet vehicula sit amet eget tortor. Donec in turpis gravida, commodo mauris ac, gravida neque. Proin eget tristique lorem. Integer tincidunt sem sit amet metus ultricies, vitae placerat dui gravida. Pellentesque viverra, nunc imperdiet egestas imperdiet, magna massa varius arcu, vitae iaculis tortor quam vitae arcu. Fusce posuere non lectus vel cursus. In rutrum sed dui non sollicitudin. Proin ante magna, imperdiet ac nisl ut, rhoncus pellentesque tortor.</p>

    <p>Cras ac velit vitae elit tempus tempus. Nullam eu posuere leo. In posuere, tortor et cursus ultrices, lorem lacus efficitur dolor, a aliquet elit urna sed tortor. Donec dignissim ante ex, non congue ex efficitur sit amet. Suspendisse lacinia tristique odio, vel sagittis dui tempor tempus. Quisque gravida mauris metus, sed aliquam lacus sollicitudin sit amet. Pellentesque laoreet facilisis scelerisque. Nunc a pulvinar magna. Maecenas at mollis tortor.</p>

    <p>Vivamus ultricies, odio sed ornare maximus, libero justo dignissim nulla, nec pharetra neque nulla vel leo. Donec imperdiet sem sem, eu interdum justo tincidunt finibus. Vestibulum lacinia diam gravida risus luctus, elementum blandit dui porttitor. Quisque varius lacus et tempor faucibus. Nam eros nunc, gravida eu tellus eget, placerat porta leo. Duis tempus ultricies felis sit amet cursus. Nunc egestas ex non lacus laoreet tincidunt. Sed malesuada placerat elementum. Mauris eu rutrum nulla. Nunc consequat lacus eget libero tincidunt, in semper eros accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu tincidunt quam, ut tincidunt eros. Donec luctus velit ac nulla lacinia malesuada.</p>

    <p>Vestibulum id mi in urna lacinia mollis. Pellentesque sit amet mauris ullamcorper, suscipit dolor in, lacinia leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Vivamus sollicitudin tempus massa sed molestie. Nullam quis neque vel nunc convallis porta a laoreet ex. Aliquam tempus hendrerit turpis eleifend convallis. Cras enim eros, fermentum sed velit eget, dignissim malesuada augue. Fusce ut fermentum nisl, vel imperdiet libero. Etiam luctus arcu volutpat turpis finibus pulvinar eget in augue. Integer sapien nisi, scelerisque ultrices quam sit amet, aliquam placerat neque. Morbi consequat porttitor lacus, quis pulvinar dolor aliquam ut. Ut et dolor id est iaculis lobortis nec aliquet nisl.</p>

    <p>Nunc et tortor cursus, ullamcorper justo vitae, ullamcorper sapien. In fringilla urna quam, et finibus ipsum finibus eu. In fermentum turpis ut eros semper, non gravida purus ornare. Praesent vehicula lobortis lacinia. Vivamus nec elit libero. Suspendisse porta neque ut erat tempor rhoncus. Nunc quis massa in ante rhoncus bibendum. Nam maximus ex vitae orci luctus scelerisque. Sed id mauris iaculis, scelerisque mauris feugiat, vehicula ipsum. Duis semper erat ac nulla sodales gravida. Suspendisse nec sapien pharetra, scelerisque odio in, dignissim erat. Aenean feugiat sagittis eros, in mattis orci tristique lacinia. Phasellus posuere id neque sed mattis. Morbi accumsan faucibus ullamcorper.</p>    
    
    
<div class="my-module">
    This is a container for "my-module" with some fixed position. The module contains the modal code.
<div class="modal fade in" aria-hidden="false" style="display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
    
</div>
</div>
</body></html>
0
cuneyttnc

Ich habe einfach die Position: fixed style aus der Datei _modal.scss entfernt und es scheint gut für mich zu funktionieren. Ich habe noch den Hintergrund und es funktioniert wie erwartet.

// Modal background
.modal-backdrop {
  /* commented out position: fixed - bug fix */
  //position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade {
    opacity: 0;
  }

Ein großes Lob an Rick Strahl für die Anleitung: https://weblog.west-wind.com/posts/2016/Sep/14/Bootstrap-Modal-Dialog-showing-under-Modal-Background

0
Glade Mellor

Laut den vorherigen Antworten könnte dies aus mehreren Gründen passieren, da das Problem darin bestand, auf zwei verschiedene Bootstrap -Links zu verweisen, ohne es zu wissen. Entfernen Sie daher einen dieser Links, um das Problem zu beheben.

in meinem Fall habe ich folgendes aufgenommen:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
      integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

und eine andere offline, die ich bereits in meinem Laptop habe.

0
Sadmi
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);
}
0
kunal kumar

Sie können das Problem umgehen, aber dadurch wird die gesamte Seite ausgeblendet. Das Modal wird wie FB Popups erscheinen. Nach dem Öffnen des Modal versuchen

 $('.modal-backdrop').removeClass('modal-backdrop');
0
user2489259

Ich hatte ein Problem wie dieses auf iPhone und iPad mit Sharepoint 2013 Modal. bootstrap Behalte Z-Index-Probleme mit Hintergrund.

Ich benutze dies nur auf 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);
}); 
0
NicK Kamimura

Ich hatte das ähnliche Problem nur für iOS-Geräte.

Die Lösung bestand darin, -webkit-overflow-scrolling: touch vom übergeordneten Element zu entfernen

0
Mo.