Bootbox 更改标题 css

Question

对于我的项目，我想要不同的 pop-ups 用于不同的用途。所以我创建了一个新的 css class。现在我想像更改按钮一样更改标题组件的样式（如下所示）。

所以我的问题是：我可以像更改按钮的 css 一样更改标题的 css 吗？同className属性。还有，我应该怎么做？

bootbox.dialog({
    message: "<h4>" + errorMessage + "<h4>",
    title: $filter("translate")("Warning"),
    buttons: {
        no: {
            label: $filter("translate")("Cancel"),
            className: "c-btn-declined-selection c-btn-global-warning",
            callback: noCallback
        },
        yes: {
            label: $filter("translate")("Confirm"),
            className: "c-btn-confirm-selection c-btn-global-warning",
            callback: yesCallback
        }
    }

Answer 1

从阅读 Bootbox.js documentation 来看，似乎不存在固有的 title-styling 方法。这给您留下了两个选择...

1.添加 style/class in-line:

bootbox.dialog({
    //...
    title: "<span style='color: red;'>This title is red</span>",
    //...
})

bootbox.dialog({
    //...
    title: "<span class="redText">This title is red</span>",
    //...
})

2。手动操作生成的元素

右键单击页面上的 Bootbox 对话框，然后转到 Inspect Element。从这里您将看到生成的内容，包括类和元素，您可以从中使用一些基本的 CSS 规则来设置它们的样式。

例如，如果 pop-up HTML 看起来像这样...

<div class='bootbox-popup'>
    <h4 class='popup-title'></h4>
    <div class='popup-body'> ... </div>
</div>

您可以使用类似的样式来设置样式：

h4.popup-title {
    color: red;
}

Bootbox 更改标题 css

Bootbox change title css

javascript

css

bootbox