jQuery 如何激活 Bootstrap 模态背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16487052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to activate the Bootstrap modal-backdrop?
提问by Jim Miller
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.
我想在一些 ajax 东西正在运行时在我的屏幕上放置一个叠加层。构建我自己的覆盖 div 没什么大不了的，但是，由于我已经在使用 Bootstrap，我想我不妨使用它.modal-backdrop——它应该已经存在了，并且对一致性和所有这些都有一些价值。
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.
问题是我找不到正确的方法来做到这一点 - 我已经尝试向 中添加类.modal-backdrop或调用.show()它，但它不起作用。
Note that I don't want to bring up a whole modal dialog, but just reveal and then hide the backdrop.
请注意，我不想调出整个模态对话框，而只是显示然后隐藏背景。
Any suggestions?
有什么建议？
回答by T.J. Crowder
Just append a divwith that class to body, then remove it when you're done:
只需将div带有该类的a 附加到body，然后在完成后将其删除：
// 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">回答by sixFingers
Pretty strange, it should work out of the box as the ".modal-backdrop" class is defined top-level in the css.
很奇怪，它应该开箱即用，因为“.modal-backdrop”类是在 css 中定义的顶级类。
<div class="modal-backdrop"></div>
Made a small demo: http://jsfiddle.net/PfBnq/
做了一个小demo：http: //jsfiddle.net/PfBnq/
