42

I want to put up an overlay on my screen while some ajax stuff is running. Building my own overlay div isn't a big deal, but, since I'm already using Bootstrap, I figure I might as well use its .modal-backdrop -- it should already be around, and there's some value to consistency and all that.

The problem is I can't find the right way to do it -- I've tried adding classes to .modal-backdrop, or calling .show() on it, but it's not working.

Note that I don't want to bring up a whole modal dialog, but just reveal and then hide the backdrop.

Any suggestions?

madth3
  • 7,275
  • 12
  • 50
  • 74
Jim Miller
  • 3,291
  • 4
  • 39
  • 57

2 Answers2

68

Just append a div with that class to body, then remove it when you're done:

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

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

Live Example:

$("input").click(function() {
  var bd = $('<div class="modal-backdrop"></div>');
  bd.appendTo(document.body);
  setTimeout(function() {
    bd.remove();
  }, 2000);
});
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//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">
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    @JimMiller: You're welcome! Glad that helped. (Amusingly, I just had reason to learn this about a week ago.) – T.J. Crowder May 10 '13 at 16:53
  • You can also do `$('
    ').appendTo(document.body).hide().fadeIn();` if you want the modal backdrop to fade in.     – phpguru May 05 '14 at 00:42
  • 1
    Are you able to do this to just one part of the page? I want to block out the main content but not the navigation bar of my page – nbz Sep 26 '14 at 14:53
  • @Krafty: The JSBin stopped working, don't know why. Made it a Stack Snippet instead. – T.J. Crowder Mar 10 '15 at 07:28
  • 1
    Upgrading from bootstrap 3.3.2 to 3.3.4 fixed this issue for me. – Beaudinn Greve Aug 26 '15 at 22:13
  • i want this on dropdown button click and deactive with dropdown list – Dami Oct 26 '16 at 07:36
  • 1
    In Bootstrap 4 your div's class names have to be `modal-backdrop fade in` – Hokascha Sep 20 '17 at 13:14
  • 1
    @Hokascha no, it has to be `modal-backdrop fade show` to show a half transparent, black backdrop (or `modal-backdrop show` for no animations). – Auroratic Sep 25 '17 at 09:33
  • @phpguru example is the only one I could get to fade in bootstrap 4. Add the `show` class to make it transparent. Otherwise it fades to black. `$('
    ').appendTo(document.body).hide().fadeIn();`     – Jens Jul 17 '18 at 09:40
-4

Pretty strange, it should work out of the box as the ".modal-backdrop" class is defined top-level in the css.

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

Made a small demo: http://jsfiddle.net/PfBnq/

sixFingers
  • 1,285
  • 8
  • 13