Jak aktywować Bootstrap modal-backdrop?

Question

Chcę umieścić nakładkę na moim ekranie, podczas gdy niektóre rzeczy ajax są uruchomione. Budowanie własnego div nakładki nie jest wielkim problemem, ale ponieważ używam już Bootstrapa, sądzę, że równie dobrze mógłbym użyć jego .modal-backdrop - powinien już być w pobliżu, i jest pewna wartość dla spójności i tak dalej.

Problem polega na tym, że nie mogę znaleźć odpowiedniego sposobu - próbowałem dodać klasy do .modal-backdrop, lub dzwoniąc pod numer .show(), ale to nie działa.

Należy pamiętać, że nie chcę wywoływać całego modalnego okna dialogowego, ale po prostu odsłonić, a następnie ukryć tło.

Wszelkie sugestie?

Answer 1

Wystarczy dołączyć div z tej klasy do body, a następnie usunąć go, gdy skończysz:

// Show the backdrop 
$('<div class="modal-backdrop"></div>').appendTo(document.body); 

// Remove it (later) 
$(".modal-backdrop").remove(); 

żywo Przykład:

$("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

Dość dziwne, to powinien działać po wyjęciu z pudełka, ponieważ klasa ".modal-backdrop" jest zdefiniowana jako najwyższy poziom w css.

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

popełniłem mały demo: http://jsfiddle.net/PfBnq/