Home › News

Cookies и JS: показываем всплывающее окно один раз

01.09.2018

Здесь расскажу вам про скрипт с использованием cookies, который позволит нам показывать Popup (всплывающие окна) только один раз в день, неделю, месяц, год и т.д.

Скачать исходники для статьи можно ниже

У многих наверное заложилось негативное впечатление про всплывающие окна, в которых в основном размещается реклама, загораживающая нужную информацию на сайте.

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

— вывести плеер онлайн радио;

— приветственный ролик, описывающий автора или сам сайт;

— вывести форму на подписку по RSS;

— информации про какую-нибудь акцию;

— вывести красивый гаджет: часики, анимацию в виде животного и прочее.

Здесь же я предлагаю вам javascript, который позволит вам выводить всплывающее окно через определенный промежуток времени, что позволить вам не раздражать ваших посетителей постоянным появлением popup окна.

Сам код выглядит следующим образом:

 

<script language="javascript" type="text/javascript"> <!-- Begin var expDays = 1; // number of days the cookie should last var page = "only-popup-once.html"; var windowprops = "left=500,top=50,width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes"; function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); function amt(){ var count = GetCookie('count') if(count == null) { SetCookie('count','1') return 1 } else { var newcount = parseInt(count) + 1; DeleteCookie('count') SetCookie('count',newcount,exp) return count } } function getCookieVal(offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function checkCount() { var count = GetCookie('count'); if (count == null) { count=1; SetCookie('count', count, exp); window.open(page, "", windowprops); } else { count++; SetCookie('count', count, exp); } } window.onload=checkCount; // End --> </script>

 

Теперь рассмотрим параметры, которые необходимо настроить под свой сайт.

var expDays = 1; // количество дней жизни cookies var page = "only-popup-once.html"; var windowprops = "left=500,top=50,width=300,height=200,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes";

Первая строчка (var expDays) задает через сколько дней начать заново показывать всплывающее окно, в вышеуказанном примере стоит через 1 день.

Вторая строчка (var page) задает путь до странички, которая будет находится во всплывающем окне, здесь вместо «only-popup-once.html» можно прописать например полный адрес до странички, например: «http://mnogoblog.ru/ob-avtore».

Третья строчка (var windowprops) задает параметры внешнего вида всплывающего окна, где:

left=500 — отступ слева

top=50 — отступ сверху

width=300 — ширина окна

height=200 — высота окна

location=no — местоположение

toolbar=no — панель инструментов браузера

menubar=no — меню браузера

scrollbars=no — прокрутка окна (можно поставить yes, тогда прокрутка будет работать)

resizable=yes — изменение размера

Как вставлять javascript в wordpress? — читайте в моей предыдущей статье.

Давайте для примера вставим данный скрипт в файл footer.php.

Для этого заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт «Внешний вид» и в нем подпункт «Редактор», далее справа в списке шаблонов ищем файл footer.php и нажимаем на него.

После спускаемся в самый низ кода файла footer.php и ищем там тег </body>, вот перед ним и вставляем данный скрипт.

Получится что-то вроде этого: