почему всплывающее окно jGrowl не смотрит как ожидалось?
я получил это jGrowl уведомление на своем сайте, когда поле уведомлений, которое не делает его всплывающее окно poped jGrowl, хорошо выглядит разработанное.
это - то, как я называю jgrowl файлы
это - поле уведомления
4 ответа
Контейнеры jGrowl изменят свой стиль, если вы ссылаетесь на таблицу стилей пользовательского интерфейса jQuery на той же странице, что и 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;
}
Используйте firebug для проверки css, применяемого к всплывающему окну. возможно, часть css перезаписана css, который вы написали сами.
В Firebug или в вашем файле CSS добавьте! Important объявления (например, background-color: red! Important; ) и посмотрите, правильно ли применяются ваши стили. Если это так, то ваши правила заменяются правилами с более высокой специфичностью (или правилами, которые применяются после ваших с такой же специфичностью).
Изменить : Я создал тестовую страницу jGrowl, и ее уведомления отображаются правильно. Попробуйте прокомментировать любые другие таблицы стилей в уме и посмотрите, сохраняется ли проблема. Также убедитесь, что файлы находятся в указанных каталогах. ( ./ является избыточным и не требуется: . указывает текущий каталог, поэтому ссылка на ./ folder / test.js аналогична просто папка / 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>
Я думаю, что jquery-ui-1.7.2.custom.css добавляет классы стилей к вашему объекту уведомления jgrowl. Я плохо разбираюсь в отладке css, поэтому не понял, как это исправить. Попробуйте закомментировать ссылку jquery-ui-1.7.2.custom.css и посмотрите, выглядит ли ваше уведомление jgrowl так, как вы ожидаете.