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