添加CSS类的bootbox模式动态

jQuery add CSS Class to bootbox Modal Dynamically

本文关键字：模式 动态 bootbox 类的 CSS 添加      更新时间：2023-09-26

我使用名为Bootboxjs的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;
}

我怎么能把上面的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选择器如何工作的好文章。

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

我建议你只添加类到你的模式，将有所有需要的样式。你可以这样做:

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;
}
相关文章：