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;
}