Làm thế nào để kích hoạt khung nền của Bootstrap?

Question

Tôi muốn tạo lớp phủ trên màn hình của mình trong khi một số nội dung ajax đang chạy. Xây dựng div lớp phủ của riêng tôi không phải là vấn đề lớn, nhưng, vì tôi đã sử dụng Bootstrap, tôi cho rằng tôi cũng có thể sử dụng .modal-backdrop - nó đã có sẵn, và có một số giá trị nhất quán và tất cả.

Vấn đề là tôi không thể tìm đúng cách để làm điều đó - Tôi đã thử thêm các lớp học vào .modal-backdrop hoặc gọi số .show() trên đó nhưng không hoạt động.

Lưu ý rằng tôi không muốn hiển thị toàn bộ hộp thoại phương thức nhưng chỉ hiển thị và sau đó ẩn phông nền.

Mọi đề xuất?

Answer 1

Chỉ cần nối thêm một div với lớp đó để body, sau đó loại bỏ nó khi bạn đã hoàn tất:

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

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

sống Ví dụ:

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

Khá kỳ lạ, nó nên làm việc ra khỏi hộp như lớp ".modal-backdrop" được định nghĩa cấp cao nhất trong css.

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

Made một bản demo nhỏ: http://jsfiddle.net/PfBnq/