Как активировать модальный фон Bootstrap?

Я хочу установить наложение на моем экране, пока работает какой-то файл ajax. Построение собственного оверлейного div не имеет большого значения, но, поскольку я уже использую Bootstrap, я полагаю, что я мог бы также использовать его .modal-backdrop - он должен быть уже вокруг, и есть некоторая ценность для последовательности и всего этого,

Проблема заключается в том, что я не могу найти правильный способ сделать это - я пробовал добавлять классы в .modal-backdrop или называть .show() на нем, но он не работает.

Обратите внимание, что я не хочу вызывать целостный модальный диалог, а просто открывать и скрывать фон.

Ответы

Ответ 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">

Ответ 2

Довольно странно, он должен работать из коробки, поскольку класс ".modal-backdrop" определяется верхним уровнем в css.

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

Сделано небольшое демо: http://jsfiddle.net/PfBnq/