Статьи и справочные
материалы

Я думаю, все со мной согласятся, что всяческие всплывающие окна с, например, порно рекламой - это плохо. Однако, иногда popup-окошко может неплохо пригодиться. Ведь подавляющее большинство интернет-пользователей - это юзеры непродвинутые. И иногда их следует подталкивать к действию, которое мы от них ждем. Допустим, это будет подписка на рассылку.

В данной заметке я расскажу (и покажу на примере) насколько просто создать всплывающее попап окно с помощью javascript-библиотеки jquery, а так же мы предусмотрим возможность блокировки этого всплывающего окна пользователем. Popup-окошко будет всплывать при посещении страницы сайта, например спустя секунду после ее загрузки. Затем, если посетитель нажмет кнопку закрытия окошка либо выполнит действие, предлагаемое всплыващим окном, попап-окошко заблокируется в cookie браузера и больше этому пользователю показываться не будет. Если он конечно не ушел с сайта сразу при виде всплывающего окна :) И последнее - мы реализуем "разблокировку" нашего всплывающего окна по нажатию определенных кнопок клавиатуры - это будет полезно в первую очередь нам самим при разработке.

Итак, начнем. Пусть у нас есть форма подписки, которую мы хотим разместить в качестве всплывающего попап окна на нашем сайте. Попапом будет блок (к примеру, #adSite), абсолютно спозиционированный относительно общего контейнера - например body. Для этого нужно:

1. указать body css-стиль position:relative;
2. указать блоку #adSite css-стиль position:absolute;left:100px;top:100px;display:none; - это начальные установки, они потом поменяются скриптом;
3. разместить форму подписки в блок #adSite;
4. подключить на сайте jquery;
5. написать наш скрипт, который будет управлять всплывающим окном, и вставить его туда же в блок #adSite.

Сразу покажу, что у нас получится в конце - пример страницы со всплывающим окном. Вы можете открыть исходный код, чтобы посмотреть как все устроено.

Как это работает: после загрузки страницы плюс 1 секунду запускается функция показа всплывающего окна. Она проверяет наличие в cookie пометки о блокировке всплывающего окна, и если ее нет - показывает попап-окно. Окошко показывается с помощью метода slideDown - то есть как бы выезжает вниз. Затем если пользователь заполнил форму подписки и нажал "Подписаться", то окошко скрывается и в cookie помечается как заблокированное. При последующих перемещениях по сайту или перезагрузке страницы оно показываться не будет. То же самое происходит если посетитель нажал на крестик.

Показать заблокированное всплывающее окно и отменить блокировку - то бишь стереть пометку в cookie - можно, нажав сочетание клавиш ctrl+enter.

Вобщем все вроде просто и разобраться в скрипте нашего всплывающего окна надеюсь вы сможете без труда. С минимальными познаниями в jQuery и javascript.