Скрипт всплывающего попап окна на jquery (javascript) с блокировкой

Скрипт всплывающего попап окна на jquery

Я думаю, все со мной согласятся, что всяческие всплывающие окна с, например, порно рекламой - это плохо. Однако, иногда 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.

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <i> <strong> <b> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
CAPTCHA
CAPTCHA на основе изображений
Введите код с картинки