jQuery Добавить CSS класс в модаль загрузки динамически
-
02-01-2020 - |
Вопрос
Я использую плагин jQuery, называемый bootboxjs для моих модалей.
Вот как я запускаю код:
bootbox.dialog({
title: '<i class="fa fa-thumbs-up"/></i> View Likes',
buttons: {
close: {
label: '<i class="fa fa-times"></i> 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
?
Решение
Вы можете попробовать это
.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.
Другие советы
Я бы предложил вам добавить класс только на ваш модал, который будет иметь все необходимые стили. Вы можете сделать это:
bootbox.dialog({
title: '<i class="fa fa-thumbs-up"/></i> View Likes',
buttons: {
close: {
label: '<i class="fa fa-times"></i> Close',
className: "btn-danger",
callback: function() {
// Close the modal
}
}
},
message: '<span name="getLikesResults"></span>'
}).addClass('bootboxDanger');
.
.bootboxDanger{
max-height: 420px;
overflow-y: auto;
}
.