jquery - 如何激活 Bootstrap 模态背景？

Question

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

问题是我找不到正确的方法来做到这一点——我尝试向 中添加类.modal-backdrop或调用.show()它，但它不起作用。

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

有什么建议么？

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

Answer 2

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

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

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