Wie aktiviere ich den Bootstrap-Modalhintergrund?

Lesezeit: 2 Minuten

Benutzer-Avatar
Jim Miller

Ich möchte ein Overlay auf meinem Bildschirm erstellen, während einige Ajax-Sachen ausgeführt werden. Das Erstellen eines eigenen Overlay-Div ist keine große Sache, aber da ich Bootstrap bereits verwende, denke ich, dass ich es genauso gut verwenden kann .modal-backdrop — es sollte bereits vorhanden sein, und Konsistenz und all das haben einen gewissen Wert.

Das Problem ist, dass ich den richtigen Weg nicht finden kann – ich habe versucht, Klassen hinzuzufügen .modal-backdropoder anrufen .show() drauf, aber es funktioniert nicht.

Beachten Sie, dass ich keinen ganzen modalen Dialog aufrufen möchte, sondern nur den Hintergrund ein- und ausblenden möchte.

Irgendwelche Vorschläge?

Benutzer-Avatar
TJ Crowder

Einfach ein anhängen div mit dieser Klasse zu bodyund entfernen Sie es dann, wenn Sie fertig sind:

// Show the backdrop
$('<div class="modal-backdrop"></div>').appendTo(document.body);

// Remove it (later)
$(".modal-backdrop").remove();

Live-Beispiel:

$("input").click(function() {
  var bd = $('<div class="modal-backdrop"></div>');
  bd.appendTo(document.body);
  setTimeout(function() {
    bd.remove();
  }, 2000);
});
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<p>Click the button to get the backdrop for two seconds.</p>
<input type="button" value="Click Me">

  • @JimMiller: Gern geschehen! Schön, dass das geholfen hat. (Amüsanterweise hatte ich erst vor etwa einer Woche Grund, dies zu erfahren.)

    – TJ Crowder

    10. Mai 2013 um 16:53 Uhr

  • Können Sie dies nur mit einem Teil der Seite tun? Ich möchte den Hauptinhalt ausblenden, aber nicht die Navigationsleiste meiner Seite

    – nbz

    26. September 2014 um 14:53 Uhr

  • Das Upgrade von Bootstrap 3.3.2 auf 3.3.4 hat dieses Problem für mich behoben.

    – Beaudin Greve

    26. August 2015 um 22:13 Uhr

  • In Bootstrap 4 müssen die Klassennamen Ihres Divs sein modal-backdrop fade in

    – Hokascha

    20. September 2017 um 13:14 Uhr

  • @Hokascha nein, muss es sein modal-backdrop fade show um einen halbtransparenten, schwarzen Hintergrund zu zeigen (bzw modal-backdrop show für keine Animationen).

    – Auroratisch

    25. September 2017 um 9:33 Uhr


Ziemlich seltsam, es sollte sofort funktionieren, da die Klasse “.modal-backdrop” auf oberster Ebene im CSS definiert ist.

<div class="modal-backdrop"></div>

Habe eine kleine Demo gemacht: http://jsfiddle.net/PfBnq/

  • Dies fügt einen undurchsichtigen schwarzen Hintergrund hinzu.

    – cdmckay

    22. Februar 2015 um 0:38 Uhr

  • Um es halbtransparent und zunächst unsichtbar zu machen, müssen Sie ihm zusätzlich den Stil geben: display: none; Hintergrundfarbe: rgba(0, 0, 0, 0,5);

    – Spooner

    28. Juli 2015 um 15:30 Uhr

1245590cookie-checkWie aktiviere ich den Bootstrap-Modalhintergrund?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy