Как сделать всплывающее сообщение вверху сайта на 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>