jQuery Добавить CSS класс в модаль загрузки динамически

Question

Я использую плагин jQuery, называемый bootboxjs для моих модалей.

Вот как я запускаю код:

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

.

Как я могу применить вышеуказанные CSS только для этого модала bootbox?

Answer 1

Вы можете попробовать это

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

.

Проверьте эти примеры

http://bootboxjs.com/examples.html

Осмотрите модалы на примерах, которые у них есть пользовательский класс.В первом примере класса Bootbox-Alert.Во втором примере класс Bootbox-подтвердите.

Если ваш код следует приведенным примерам. Ваш код должен иметь класс под названием Bootbox-Dialog на модальном.

Документы Bootbox Docs Вы можете добавить пользовательское имя класса.

http://bootboxjs.com/documentation.html

Это хорошая запись о том, как работают селекторы CSS.

http://css-tricks.com/how-csss-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;
}

.