为什么jGrowl弹出框看起来不如预期？

Question

为什么jGrowl弹出框看起来不如预期？

9

我的网站上出现了jGrowl通知，但是当通知框弹出时，jGrowl弹出窗口的样式看起来不太好。

这是我调用jGrowl文件的方式：

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

这是通知框。

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

- clonex1

抱歉，这是我调用jgrowl文件的方式<link rel="stylesheet" type="text/css" href="./include/jgrowl/jquery.jgrowl.css" /> <link rel="stylesheet" type="text/css" href="./include/jgrowl/css/redmond/jquery-ui-1.7.2.custom.css" /> <script type="text/javascript" src="./include/jgrowl/jquery.jgrowl.js"></script> <script type="text/javascript" src="./include/jgrowl/js.js"></script> - clonex1

你是否偶然使用了 blueprint.css？ - wowo_999

不，只是普通的jGrowl... 我检查了文件和路径，甚至重新下载了文件3次，结果还是一样的。 - clonex1

我曾经遇到过同样的问题。我正在使用jquery-ui，所以我在这个SO答案中找到了解决方案：https://dev59.com/sk_Sa4cB1Zd3GeqP_17r#3578068 - Brian Jensen

4个回答

1

在 Firebug 或者您的 CSS 文件中，添加 !important 声明（例如 background-color: red !important;），并查看您的样式是否正确应用。如果是这样，则您的规则被更高的特异性的规则（或具有相等特异性的规则）覆盖了。编辑：我创建了一个 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>

- Taylor D. Edmiston

我尝试过了，它被红色覆盖，但标题和消息类仍然是不同的颜色。 http://hinuts.com/sd.PNG 请查看截图。 - clonex1

看一下我对上面帖子的补充。 - Taylor D. Edmiston

0

使用Firebug检查应用于弹出框的CSS。可能你自己编写的一些CSS被覆盖了。

- Nealv

已经应用了，但仍然无法弄清为什么它的样式不如预期！ - clonex1

0

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

- Ruth

好的，我想我已经弄清楚了。进入jquery.jgrowl.js文件。查找ui-state-highlight。这是通知设置的类之一。我相信这是为了“主题滚动”。如果您只想破解jquery.jgrowl.js文件，则删除ui-state-highlight类，jgrowl通知现在将具有您期望的黑色背景。 - Ruth

甚至没有包含，这是我当前的jgrowl通知 http://hinuts.com/sd.PNG - clonex1

看起来它越来越接近了。尝试在jquery.jgrowl.js中查找所有ui-state-highlight的实例。尝试将它们全部删除。 - Ruth

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathan Taylor · Accepted Answer

如果你在页面上引用了 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;
}