如何激活 Bootstrap 模态背景？答案

【问题标题】：How to activate the Bootstrap modal-backdrop?如何激活 Bootstrap 模态背景？
【发布时间】：2013-05-05 10:06:13
【问题描述】：

我想在一些 ajax 东西运行时在我的屏幕上放置一个覆盖。构建我自己的覆盖 div 没什么大不了的，但是，由于我已经在使用 Bootstrap，我想我不妨使用它的.modal-backdrop——它应该已经存在，并且一致性和所有这些都有一些价值.

问题是我找不到正确的方法——我尝试向.modal-backdrop 添加类，或在其上调用.show()，但它不起作用。

请注意，我不想调出整个模式对话框，而只是显示然后隐藏背景。

有什么建议吗？

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

只需将带有该类的div 附加到body，然后在完成后将其删除：

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

【讨论】：

@JimMiller：不客气！很高兴这有帮助。（有趣的是，我刚刚有理由在一周前了解到这一点。）
您可以只对页面的一部分执行此操作吗？我想屏蔽主要内容，而不是页面的导航栏
从 bootstrap 3.3.2 升级到 3.3.4 为我解决了这个问题。
在 Bootstrap 4 中，你的 div 的类名必须是 modal-backdrop fade in
@Hokascha 不，它必须是 modal-backdrop fade show 才能显示半透明的黑色背景（或 modal-backdrop show 没有动画）。

【解决方案2】：

很奇怪，它应该开箱即用，因为“.modal-backdrop”类是在 css 中定义的顶级。

<div class="modal-backdrop"></div>

做了一个小demo：http://jsfiddle.net/PfBnq/

【讨论】：

这会添加一个不透明的黑色背景。
要使其半透明并且最初不可见，您需要另外赋予它样式： display: none;背景色：rgba(0, 0, 0, 0.5);