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

Question

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?

Answer 1

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