почему всплывающее окно jGrowl не выглядит, как ожидалось? - PullRequest
Новая
       16

почему всплывающее окно jGrowl не выглядит, как ожидалось?

7 голосов
/ 27 июля 2010

Я получил это уведомление jGrowl на своем сайте, когда в окне уведомлений его всплывающее окно jGrowl выглядит неправильно.

вот как я называю файлы jgrowl 

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

это окно уведомлений

альтернативный текст http://hinuts.com/jgrowl.look.png

Ответы [ 4 ]

23 голосов
/ 26 августа 2010

Для контейнеров jGrowl будет изменен их стиль, если вы ссылаетесь на таблицу стилей пользовательского интерфейса jQuery на той же странице, что и jGrowl. Начиная с версии jGrowl 1.2.2 все контейнеры jGrowl имеют класс CSS "ui-state-highlight", который добавляет фон, рамку и цвет шрифта в определение стиля.1004 *

Чтобы предотвратить это, вы можете сделать следующее дополнение к файлу jquery.jgrowl.css: 

div.jGrowl > .ui-state-highlight {
    background: inherit;
    color: inherit;
    border: inherit;
}
1 голос
/ 30 июля 2010

В Firebug или в вашем CSS-файле добавьте! Важные объявления (например, 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>
0 голосов
/ 30 июля 2010

Я думаю, что jquery-ui-1.7.2.custom.css добавляет классы стилей к вашему объекту уведомления jgrowl.Я не очень хорош в отладке CSS, поэтому я не понял, как это исправить.Попробуйте закомментировать ссылку jquery-ui-1.7.2.custom.css и посмотрите, из-за этого ли ваше уведомление jgrowl выглядит так, как вы ожидаете.

0 голосов
/ 27 июля 2010

Используйте Firebug, чтобы проверить CSS, который применяется к всплывающему окну.вероятно, некоторые из css перезаписаны css, который вы написали сами.

...