JQueryは、BootBox ModalにCSSクラスを動的に追加します

Question

私はモジュールのBootBoxJと呼ばれるjQueryプラグインを使用しています。

これは私がコードを実行する方法です：

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
});

.

プロジェクトのプラグインを作り、これが既存のモーダルスタイルに影響を与えたくないが、コンテンツが最大の高さに達するとこの特定のモーダルスクロール可能なものにする必要があります。

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

.

このbootboxモーダルのほんの上記のCSをどのように適用することができますか？

Answer 1

これを試すことができます

.bootbox-dialog .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

.

これらの例をチェックしてください

http://bootboxjs.com/examples.html

モジュールを検査する例ではカスタムクラスを持っています。最初の例のクラスのブートボックスアラートで。2番目のサンプルクラスのブートボックスが確認されます。

あなたのコードが例の後に続く場合 あなたのコードには、モーダルのブートボックスダイアログというクラスがあります。

ブートボックスドキュメント表示カスタムクラス名を追加することができます。

http://bootboxjs.com/documentation.html

これは、CSSセレクタがどのように機能するかについての良い書き込みです。

http://css-tricks.com/how-css-selectors-work./

Answer 2

私はあなたのモーダルにのみクラスを追加することをお勧めします。 あなたはこのようにすることができます：

bootbox.dialog({
    title: '<i class="fa fa-thumbs-up"/></i>&nbsp;&nbsp;View Likes',
    buttons: {
        close: {
            label: '<i class="fa fa-times"></i>&nbsp;&nbsp;Close',
            className: "btn-danger",
            callback: function() {

                // Close the modal

            }

        }
    },
    message: '<span name="getLikesResults"></span>'
}).addClass('bootboxDanger');

.

---

.bootboxDanger{
    max-height: 420px;
    overflow-y: auto;
}

.