Как сделать всплывающее окно на сайте?

Ок, допустим у вас есть сайт/лендинг и потребность показать что-то очень важное на нем, например, форму подписки или уникальную акцию. Как это сделать лучше всего? Правильно, посредство всплывающего окна (или попапа) на 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-код.

wordpress-popup

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

Поделись/сохрани ссылку: