Как сделать всплывающее сообщение вверху сайта на jQuery
В этом уроке мы научимся делать всплывающее сообщение на jQuery вверху страницы сайта, которое можно использовать для сообщения пользователям важной информации ну а если есть идеи, то и в других целях. Применение jQuery не только прибавит функцыональности скрипту но и украсит дизайн сайта. Пробуйте это готовое решение исходники сможете скачать с нашего сервера!
Между тегами
<head><head/>пропишем следующий код:
<script type="text/javascript" language="javascript"> $(document).ready(function() { $(window).scroll(function() { $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); }); $('#close_message').click(function() { $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow"); }); }); </script>В таблицу стилей или в сам документ пропишем следующие стили :
#message_box { position: absolute; top: 0; left: 0; z-index: 10; background:#ffc;padding:5px;border:1px solid #CCCCCC;text-align:center; font-weight:bold; width:99%;}Документ будет иметь структуру, состоящую из двух блоков
<div />В одном из них будет отображаться сообщение, а в другом будет содержаться весь остальной контент страницы.
Таким образом, код будет выглядеть так:
<div id="message_box"><img id="close_message" style="float:right;cursor:pointer" src="cross.png" />Здесь Ваше сообщение</div><div style="margin-top:50px"> Здесь остальное содержание Вашей страницы </div>Скачаем исходники (изображение крестика и скрипт jQuery), который подключим к нашему документу.
<script type="text/javascript" src="jQuery1.2.6.js"></script>
-
- DirectoryWeb
- 07.11.2012
- 1 9 011
- 0
Cкрипт букмекерского сайта ставок на спорт BetLab 1.1
14-01-2023, 20:27, Казино
Скрипт инвестиционного проекта 20percent
19-11-2019, 06:00, HYIP, MLM, МММ
Скрипт инвестиционной онлайн игры VKcoin
25-09-2019, 08:25, Экономические игры
Скрипт экономической игры BEST HERO
18-05-2020, 10:27, Экономические игры
Сервис накрутки BossLike
22-04-2025, 16:45, Арбитраж трафика / Push-реклама
Скрипт интернет магазина CMS MaxyStore v.1.5.5.1
23-08-2014, 00:48, Скрипты
Loading...
Внимание! Данный материал предоставлен сайтом DirectoryWeb.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое
Отзывы