jquery - Twitter Bootstrap: 同じページに複数のモーダルがあり、異なる背景色が必要

Question

ページに 2 つのモーダルがあります。 http://twitter.github.com/bootstrap/javascript.html#modalsを参照してください。ページの背景色を変えたい。<div class="modal-backdrop fade in"></div>ページの下部にJS が生成されるようです。Bootstrap configを介してクラスまたは何かを設定する方法はありますか?

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