Twitter Bootstrap: multiple modal on same page, want different background colors

css, jquery, twitter-bootstrap

Solution

No, you can't, by any configuration, set the `backdrop` color, the only way is to change it by an event.

Let's assume this example: http://jsbin.com/uwelok/1/

You will need to set a new class on the `shown` event, like:

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

there is no need to reset it, as upon the modal `hide` itself, the element is removed and created again, using the default configuration upon the next `show`.

and with such trick, you can have a simple class as:

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

Problem

I have 2 modals on a page, see: http://twitter.github.com/bootstrap/javascript.html#modals. I want them to have different page background colors. The JS seems to generate `<div class="modal-backdrop fade in"></div>` at the bottom of the page. Is there a way to set a class or something to it via Bootstrap config?

Original source