JGrowl 设置主题答案

【问题标题】：JGrowl set themeJGrowl 设置主题
【发布时间】：2020-03-09 07:05:56
【问题描述】：

我的 Jgrowl 代码是：

    $(document).ready(function() {
        $.jGrowl("<strong>Error!</strong><br />An invalid ID was passed and your template could not be loaded", { sticky: true, theme: 'test' });
    });

而我在 Jgrowl CSS 中的 CSS 是：

.test{
    background-color:       #000000;
}

但它并没有将该 CSS 应用到盒子上。我可能误用了主题选项，但我很难找到很多关于它的文档。

【问题讨论】：

标签： javascript jquery css jgrowl

【解决方案1】：

.test 背景颜色被“div.jGrowl div.jGrowl-notification”样式覆盖。您可以将 .test 样式设为 !important：

.test{
    background-color:       #000000 !important;
}

或者更具体地访问 .test 类：

"div.jGrowl div.jGrowl-notification.ui-state-test"

这也会覆盖它

【讨论】：

【解决方案2】：

您可以使用jGrowl

的Configuration Options的参数

theme 是一个 CSS 类，用于指定此特定消息的自定义样式，旨在与 jQuery UI 一起使用。

CSS：

.jGrowl .changeCount {
    background-color: #337ab7;
}

JS：

$.jGrowl("Message in box", {theme: 'changeCount'});

关于这个插件的更多信息在这里： https://github.com/stanlemon/jGrowl/blob/master/README.md

【讨论】：