Для информирования посетителей сайта часто требуется динамично создать и показать окно сообщения. Что весьма притягивает взор посетителей, в данном уроке мы рассмотрим как создать простые выпадающие информационные блоки с помощью jQuery. Функциональность заключается в том, что можно легко разместить в этих окнах регистрационную форму, подписку на новости или какую-нибудь рекламу в качестве содержимого тэга div #box.

 

Первым шагом будет подключение скрипта между тегами <head></head>:

Теперь мы создаем разметку для информационного блога и кнопки:

Рассмотрим стилизацию с помощью CSS. Плагин, который рассматривается в данном уроке, добавляет свои собственные правила CSS для позиционирования окна сообщения, чтобы добиться эфекта выпадения, но нам все еще нужно закодировать дизайн окна в файле стилей.

Теперь стилизируем кнопку, по нажатию на которую происходит выпадания информационного окна:

Во второй части кода используется несколько правил CSS3 для кнопки, чтобы добиться вида полированной поверхности. Заметьте, что присутствуют два правила gradient, которые предназначены для браузеров Mozilla Firefox и Webkit (Safari и Chrome).

Полноценная кнопка CSS3 — Градиенты, скругленные углы и тень текста.

Последний шаг, это использование jQuery, Сначала создадим плагин bounceBox. Создание плагина jQuery — это вопрос расширения объекта $.fn новой функцией. ‘this’:

На заметку, мы определяем четыре раздельных метода, которые преобразуют тэг div в bounceBox (и применяют правила CSS для позиционирования), показывает его, скрывает его или переключает состояния с использованием метода jQuery animate().

В данном коде первым, что мы сделаем — конвертируем тэг div #box в bounceBox, и привязываем обработчик к событию нажатия кнопки мыши на большой графической кнопке на странице или в выпадающем окне.