loader.gif-overlay legt sich nicht über Bootstrap Modal

Kalito

Erfahrenes Mitglied
Bei längerdauernden AJAX-Request rufe ich ein loader.gif auf. Nun wollte ich die Seite entsprechend abdunkeln.

Dafür habe ich direkt nach dem Body ein leeres Div definiert.
HTML:
<body>
    <div id="loader_overlay" class="loader_hidden"></div>
</body>

mit folgenden CSS:
CSS:
#loader_overlay
{
    position:absolute;
    height:100%;
    width:100%;
    background:black;
    opacity:.7;
    z-index:2;
}

Ohne Modal sieht erstmal alles so ok aus (loader.gif wird noch getauscht). Aber mit dem Modal halt nicht (siehe Anhänge). Gerade bin ich irgendwie ratlos. Was könnte ich hier machen?
 

Anhänge

  • mit Overlay.PNG
    mit Overlay.PNG
    6,5 KB · Aufrufe: 9
  • ohne Overlay.PNG
    ohne Overlay.PNG
    8,7 KB · Aufrufe: 9

Sempervivum

Erfahrenes Mitglied
Mal ins Blaue getippt: Solche Plugins tun häufig alles, um sich in den Vordergrund zu zwingen, z. B. durch astronomische z-Indizes. Bei Lightbox liegt dies ähnlich und ich habe mal in einem meiner Skripts nachgesehen: Fancybox benutzt dort z-index: 99992; Du könntest es bei deinem Modal mal nachsehen und versuchen, den betr. Wert zu übertrumpfen.