jQuery 将 CSS 类动态添加到 Bootbox Modal
-
02-01-2020 - |
题
我正在为我的模态使用名为 Bootboxjs 的 jQuery 插件。
这就是我运行代码的方式:
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-confirm。
如果您的代码遵循示例。您的代码应该在模态上有一个名为 bootbox-dialog 的类。
Bootbox 文档显示您可以添加自定义类名称。
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;
}
不隶属于 StackOverflow