Pnotify通知错误的颜色

时间:2016-02-26 09:18:50

标签: c# css jquery-ui pnotify bootstrap-notify

您好我正在尝试更改每个通知的颜色,但我无法从哪里找到。我使用jqueryui作为样式。 Bellow你可以看到错误和成功通知如何出现在我的屏幕上!

enter image description here

enter image description here

这是我正在使用的代码,用于动态构建调用pnotify的脚本

string script1 = @"var displayIcon = " + displayIcon + @";
                            $(function(){
                                new PNotify({
                                    title: '" + messageString + @"',
                                    styling: 'jqueryui',
                                    width: '400px',
                                    opacity: 0.9,
                                    type: '" + typeLowercase + @"',
                                    icon: displayIcon,
                                    hide: false,
                                    buttons: {
                                        sticker: false
                                    },
                                    animation: {
                                        effect_in: 'fade',
                                        effect_out: 'slide'
                                    }
                                });
                            });";

1 个答案:

答案 0 :(得分:1)

初始化PNotify时,没有background-colour选项。您需要对任何自定义样式使用addclass选项。 ui.pnotify .ui-pnotify-container定义通知的背景颜色。在ui.pnotify末尾添加一个附加类(例如ui.pnotify.myclass)并为其分配background-color将允许您在初始化阶段使用myclass

因此,如果您要为通知指定红色的背景颜色,则可以创建如下的css规则:

.ui-pnotify.red .ui-pnotify-container {
  background-color: red !important;
}

然后,在初始化阶段,您可以使用addclass选项,如下所示:

$(function() {
  new PNotify({
    title: '" + messageString + @"',
    styling: 'jqueryui',
    width: '400px',
    opacity: 0.9,
    type: '" + typeLowercase + @"',
    icon: displayIcon,
    hide: false,
    addclass: 'red',
    buttons: {
      sticker: false
    },
    animation: {
      effect_in: 'fade',
      effect_out: 'slide'
    }
  });
});

addclass选项中指定自定义班级名称时,您不需要包含ui-pnotify;只是后面的类的名称(在这种情况下是red)。

在下面的小提琴中,我创建了两个自定义类(redblue)。将addclass的值更改为redblue以查看自定义背景颜色:

<强> Fiddle Demo