jQuery 动态地将 CSS 类添加到 bootbox 模态答案

【问题标题】：jQuery add CSS Class to bootbox Modal DynamicallyjQuery 动态地将 CSS 类添加到 bootbox 模态
【发布时间】：2014-08-01 21:41:34
【问题描述】：

我正在为我的模式使用名为 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-body，而不是.modal .modal-body。

标签： javascript jquery css twitter-bootstrap bootbox

【解决方案1】：

你可以试试这个

.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/

【讨论】：

【解决方案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;
}

【讨论】：