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

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

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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