Здесь расскажу вам про скрипт с использованием 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” можно прописать например полный адрес до странички, например: “https://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>, вот перед ним и вставляем данный скрипт.