9

我在我的网站上收到了这个 jGrowl 通知，当通知框弹出的 jGrowl 弹出窗口看起来风格不佳时。

这就是我调用 jgrowl 文件的方式

<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" />

这是通知框

替代文字 http://hinuts.com/jgrowl.look.png

4

4 回答 4

25

如果您在与 jGrowl 相同的页面上引用 jQuery UI 的样式表，jGrowl 容器的样式将受到影响。从 jGrowl 版本 1.2.2开始，所有 jGrowl 容器都使用 CSS 类“ui-state-highlight”进行装饰，它为样式定义添加了背景、边框和字体颜色。

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background:url("images/ui-bg_glass_55_fbf9ee_1x400.png") repeat-x scroll 50% 50% #FBF9EE;
    border:1px solid #FCEFA1;
    color:#363636;
}

为了防止这种行为，您可以在 jquery.jgrowl.css 文件中添加以下内容：

div.jGrowl > .ui-state-highlight {
    background: inherit;
    color: inherit;
    border: inherit;
}
于 2010-08-26T18:07:01.427 回答
1

在 Firebug 或您的 CSS 文件中，添加 !important 声明（例如background-color: red !important;）并查看您的样式是否正确应用。如果是这样，您的规则将被具有更高特异性的规则（或在您的规则之后应用的具有相同特异性的规则）覆盖。

编辑：我创建了一个 jGrowl 测试页面，它的通知显示正确。尝试在您的脑海中注释掉任何其他样式表，看看问题是否仍然存在。此外，请确保文件位于指定的目录中。（./是多余的，不需要：.表示当前目录，所以引用./folder/test.js和 just 一样folder/test.js）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  

    <link rel="stylesheet" href="jquery.jgrowl.css" type="text/css" />
    <link rel="stylesheet" href="examples/css/redmond/jquery-ui-1.7.2.custom.css" type="text/css" />

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="examples/jquery.ui.all.js"></script>
    <script type="text/javascript" src="jquery.jgrowl.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
        $.jGrowl( "jGowl test", { sticky: true } );
    });
    </script>

</head>
<body>
</body>
</html>
于 2010-07-30T17:46:49.117 回答
0

使用 firebug 检查应用于弹出框的 css。可能某些 css 被您自己编写的 css 覆盖。

于 2010-07-27T19:58:32.157 回答
0

我认为 jquery-ui-1.7.2.custom.css 正在向您的 jgrowl 通知对象添加样式类。我不擅长调试 css，所以我还没有弄清楚如何修复它。尝试注释掉 jquery-ui-1.7.2.custom.css 链接，看看这是否使您的 jgrowl 通知看起来像您期望的那样。

于 2010-07-30T17:37:01.443 回答