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?
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.
Answer: Use the modal('show') Method You can simply use the modal('show') method to show or open the modal window in Bootstrap using jQuery. Other related Bootstrap's modal methods are modal('hide') and modal('toggle') .
On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal. As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc .
Images can be fitted in modal popup using Bootstrap by including <img> tag in the “modal-body” div. The “modal-body” div determines the main content of modal popup. By using the <img> tag, an image can be inserted into it.
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With