How to activate the Bootstrap modal-backdrop?

Question

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

Answer 1

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">

Answer 2

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/