Twitter Bootstrap:同一页面上的多个模态,需要不同的背景颜色

Question

我在页面上有2个模态,请参阅:http://twitter.github.com/bootstrap/javascript.html#modals.我希望他们有不同的页面背景颜色.JS似乎生成<div class="modal-backdrop fade in"></div>在页面的底部.有没有办法通过Bootstrap配置设置类或其他东西？

Answer 1

不,您无法通过任何配置设置backdrop颜色,唯一的方法是通过事件更改它.

让我们假设这个例子:http://jsbin.com/uwelok/1/

您需要在shown事件上设置一个新类,例如:

$('#m2').on('shown', function () {
    $('.modal-backdrop').addClass('backdrop-yellow');
});

没有必要重置它,就像在模态hide本身一样,元素被删除并再次创建,使用下一个的默认配置show.

有了这样的技巧,你可以有一个简单的类:

.backdrop-yellow {
    background-color: yellow;
}