Ок, допустим у вас есть сайт/лендинг и потребность показать что-то очень важное на нем, например, форму подписки или уникальную акцию. Как это сделать лучше всего? Правильно, посредство всплывающего окна (или попапа) на Javascript. Какие особенности должны быть у такого скрипта:
— простота установки
— разнообразие в дизайне
— широкая функциональность и быстрота
— его не блокирует adblock (ведь мы не спам какой-то будем показывать, верно?)
— всплытие по таймеру
— возможность всплывания сразу при открытии сайта
— возможность разместить всё что угодно на попапе (от javascript до iframe)
Всем этим обладает скрипт, с которым я сейчас вас ознакомлю. И сразу перейдем к примеру установки такого скрипта. В данном примере рассмотрим установку всплывающего окна с акцией через 5 секунд после открытия страницы:
1. Идем на www.jacklmoore.com/colorbox/ — это официальный сайт. Там наблюдаем надпись «View Demos» с пятью цифрами, это шаблоны дизайна, полистайте и выберите наиболее понравившееся оформление. Скачиваем архив со скриптом по ссылке «Download«.
2. Распаковав архив, обнаруживаем в нем jquery.colorbox.js — вот это файл закачиваем себе на хостинг (допустим в подпапку /scripts). Далее, мы выбрали стиль дизайна №2, так что идем в папку «example2» и оттуда копируем к себе на хостинг файл colorbox.css и папку images (допустим в подпапку /css).
3. Подключаем данный скрипт непосредственно к сайту. Открываем наш index.html, в нем внутри тега <head> подключаем дизайн всплывающего окна посредством такой строчки:
<link rel="stylesheet" href="/css/colorbox.css" />
А теперь внутри тега <body> поместите такой код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> /* вот эту строку уберите, если у вас уже подключен jquery*/
<script src="/scripts/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({html:"<h1>ПРИВЕТ!</h1>"});
}
setTimeout(openColorBox, 5000); /*вот здесь задается время всплытия окна 5000 = 5сек, соответственно 50=5мс, т.е. почти сразу после загрузки страницы*/
</script>
Сохранитесь и обновите в браузере (Ctrl+F5) страницу index.html. Если через 5 сек. всплывет окно с надписью «Привет!»- вы всё сделали правильно. Можете вместо слова «Привет!» вставить любой html оформленный код — и он будет отображаться для ваших посетителей.
В нашем случае мы хотим вывести на слайдер содержимое странички «pop-up2.html». Таким образом внутренний код у нас изменится:
function openColorBox(){
$.colorbox({iframe:true, width:"60%", height:"100%", href: "pop-up2.html"});
}
setTimeout(openColorBox, 5000);
Вот и все, пользуйтесь, но не вредите своим посетителям.
Всплывающее окно для Wordpress
Как и всё в CMS WordPress — всплывающие окна создаются посредством плагинов. Вообще для создания поп-апов на сайтах WordPress создано более тысячи плагинов, но подавляющее большинство из них ужасно сложны в настройке, либо платны, либо имеют ограниченный функционал.
Самым быстрым, легким и удобным плагином для создания всплывающих окон WordPress заслуженно считаю WP Tactical Popup. Невероятно простой и мощный плагин, подойдет, если вы хотите добавить форму подписки во всплывающее окно от любой системы (JustClick, MailChimp, Getresponse, etc), можно вставить просто картинку, видео или html-код.
Ко всему прочему можно задавать таймер открытия, после скольких просмотренных страниц окно всплывет, с какой частотой всплывать и т.д. В общем лучшего плагина для создания поп-ап окон я не находил.
Как сделать так, чтобы окно показывалось один раз одному пользователю? а не при каждом заходе на страницу
завести специальную переменную с значением «0», Когда пользователь заходит на сайт проверяете чему равна переменная, если «0» — то показываете, а если «1» — то не показываете, когда пользователю показали окно присвоили значение «1».
if (document.cookie.indexOf(‘_visited=1’) == -1) {
setTimeout(openColorBox, 5000); /*вот здесь задается время всплытия окна 5000 = 5сек, соответственно 50=5мс, т.е. почти сразу после загрузки страницы*/
document.cookie = ‘_visited=1; path=/’;
}
Как сделать, чтоб всплывающее окно появлялось слева например, а не посреди страницы
Все замечательно, а как заблокировать прокрутку страницы, пока открыто всплывающее окно?
Спасибо.
PS. Я пробовал overlay:hidden; контейнеру поставить, но как-то не очень помогло 🙁