如何激活Bootstrap模态背景? [英] How to activate the Bootstrap modal-backdrop?
问题描述
我想在运行一些Ajax东西时在屏幕上放置一个覆盖图.构建自己的覆盖div没什么大不了的,但是,由于我已经在使用Bootstrap,我认为我不妨使用它的.modal-backdrop
-它应该已经存在了,并且一致性和所有这些都具有一些价值.
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.
问题是我找不到正确的方法-我试图将类添加到.modal-backdrop
或对其调用.show()
,但是它不起作用.
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.
有什么建议吗?
推荐答案
只需将带有该类的div
附加到body
,然后在完成后将其删除:
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();
实时示例:
$("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">
这篇关于如何激活Bootstrap模态背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!