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

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

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

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

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

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

Источник

4 ответа

Решение

Для контейнеров jGrowl будет изменен их стиль, если вы ссылаетесь на таблицу стилей пользовательского интерфейса jQuery на той же странице, что и jGrowl. Начиная с версии 1.2.2 jGrowl все контейнеры 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;
}
Источник

В Firebug или в вашем CSS-файле добавьте! Важные объявления (например, background-color: red !important;) и посмотрите, правильно ли применяются ваши стили. Если это так, ваши правила переопределяются правилами с более высокой специфичностью (или правилами, которые применяются после ваших с равной специфичностью).

Изменить: я создал тестовую страницу jGrowl и ее уведомления отображаются правильно. Попробуйте закомментировать любые другие таблицы стилей в своей голове и посмотрите, сохраняется ли проблема. Также убедитесь, что файлы находятся в указанных каталогах. (The ./ избыточен и не нужен: . указывает на текущий каталог, поэтому ссылки ./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>
Источник

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

Источник

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

Источник
Другие вопросы по тегам