Question

我在我的网站上收到了这个jGrowl通知，当通知框中它的poped jGrowl弹出窗口看起来没有很好的样式。

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

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

这是通知框

alt text http://hinuts.com/jgrowl.look.png

Answer 1

如果在jGrowl所在的页面上引用jQuery UI的样式表，jGrowl容器的样式会受到影响。 As of jGrowl version 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;
}

Answer 2

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

编辑：我创建了一个jGrowl测试页面，其通知正确显示。尝试在脑海中评论出任何其他样式表，看看问题是否仍然存在。此外，请确保文件位于指定的目录中。（./是多余的，不需要：.表示当前目录，因此引用./folder/test.js与仅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>

Answer 3

使用firebug检查应用于弹出框的css。可能有些css被你自己写的css覆盖了。

Answer 4

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

为什么jGrowl popup看起来不像预期？

4 个答案: