Twitter Bootstrap：同一页面上的多个模态框，希望有不同的背景颜色

Question

我在一个页面上有两个模态框，参见： http://twitter.github.com/bootstrap/javascript.html#modals 。 我希望它们具有不同的页面背景颜色。 JS似乎会在页面底部生成<div class =“modal-backdrop fade in”></ div>。 有没有办法通过Bootstrap配置为其设置类或其他属性？

- StackOverflowNewbie

---

Twitter Bootstrap文档中没有关于这个的内容，为什么不用CSS或JS添加呢？ - jxs

将类添加到标记中不会对JS创建的<div>产生任何影响。 - StackOverflowNewbie

Answer 1

不可以通过任何配置来设置backdrop颜色，唯一的方法是通过事件来改变它。

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

你需要在shown事件上设置一个新的类，例如：

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

不需要重置它，因为在模态框自己隐藏时，该元素会被删除并重新创建，使用默认配置在下一次显示时。

通过这种技巧，您可以拥有一个简单的类，如下所示：

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

- balexandre

---

其中一种颜色是“透明的”。有没有办法不显示背景？ - StackOverflowNewbie

模态框的行为是将该“窗口”置于前台，并将用户的焦点从除该窗口以外的任何内容中移除。也许你想要的只是显示一个警告框？顺便说一句，如果您将背景颜色设置为“透明”，则此方法仍然有效：http://jsbin.com/uwelok/2/ - balexandre

另一个技巧是将你的 backdrop-yellow 规则设置为 opacity: 0;，这将同时移除任何颜色。 - balexandre

请注意，背景的不透明度也设置为0.8 - 因此，除非您覆盖它（当然，如果它是透明的），否则.backdrop-yellow中定义的颜色将应用'opacity：0.8'。 - timbo