Блог специалистов
07.06.2012

Java-cкрипт всплывающего окна предупреждения с записью в куки

Данный Java-cкрипт всплывающего окна с записью в куки подходит для предупреждения или для важной новости на Вашем сайте. Ниже дана вся инструкция по работе со скриптом.

1. Устанавливаем сам скрипт на страницу в нужном вам месте:

<script language="javascript" type="text/javascript" > function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); } function checkuserage() { userage=getCookie('userage'); if (userage!=null && userage!="") {} else { var div = document.createElement('div'); div.innerHTML = "<div style='position:fixed;z-index:100;width:100%;height:100%;top:0px;left:0px;' id='18_popup_div'>" +" <div style='position:relative;width:100%;height:100%'>" +" <div style='position:absolute;top:0px;left:0px;background-color:gray;filter:alpha(opacity=70);-moz-opacity: 0.7;opacity: 0.7;z-index:200;width:100%;height:100%'></div>" +" <div style='position:absolute;top:0px;margin:auto;z-index:300;width: 100%;height:500px;'>" +" <div style='margin:auto;width:400px;background-color: white;border: solid 1px black;padding: 40px;margin-top:100px'>" +"<?echo $arItem['PREVIEW_TEXT'];?>" +" <br/><br/><a href='#' style='display:block;width: 100px;text-align: center;text-decoration:none;font-size:14px;font-weight:bold;color:white;background-color: green;padding: 8px;margin: 0px 0px;' onclick='setCookie(\"userage\",1);document.getElementById(\"18_popup_div\").style.display=\"none\";return false;'>Продолжить</a>" +" </div>" +" </div>" +" </div>" +"</div>"; document.body.appendChild(div); setCookie('userage',userage,1); } } </script>

Эта строчка +"<?echo $arItem['PREVIEW_TEXT'];?>"
вывод текста в Битриксе, но ее можно заменить на любой другой код. Нужно обратить внимание на экрнирование и неразрывность строк.

2. Подключаем выполнение скрипта в тег BODY, как указано ниже:

<body onload="checkuserage()">

Всё, на этом наше всплывающее окно-предупреждение готово.

3. Возможно, потребуется ссылка для очистки Куки этого окна, она идет ниже:

<script> function deleteCookie( name, path, domain ) { if ( getCookie( name ) ) document.cookie = name + '=' + ( ( path ) ? ';path=' + path : '') + ( ( domain ) ? ';domain=' + domain : '' ) + ';expires=Thu, 01-Jan-1970 00:00:01 GMT'; } </script> <input type="button" value="Новость" onclick='deleteCookie("userage");history.go(0);return false;'>

4. Возможно, потребуется так же просто ссылка, открывая которую нужно записать куки, но и перейти по ней, её код ниже:

<a onclick='setCookie(\"userage\",1);document.getElementById(\"18_popup_div\"), top.location.href=\"/events/news/512/\";return false;' href='' ><img src='например, путь к картинке' title='' border='0' alt=' ' /></a>

Вариант 2. Более современный.

<!--Всплывающий баннер--> <style> #overlay { position: fixed; top: 50%; right: 50%; display: none; max-width: 510px; height: 510px; background: #000; z-index: 999; -webkit-animation: fade .6s; -moz-animation: fade .6s; animation: fade .6s; padding:20px; } .spasibo { border-bottom: 1px #fff dotted; color:#FFF; cursor:pointer; } .rolik { color:#FFF; font-weight:bold; } </style> <div id="overlay"> <div class="popup"> <div class="text-center"><span class="rolik">Текст</span></div> <div class="text-center" style="margin:10px"> Текст </div> <div class="text-center"><span class="spasibo" onclick="document.getElementById('overlay').style.display='none';$.cookie('hiderolikmodal', true, {expires: 1, path: '/'});">Спасибо, уже видели</span></div> </div> </div> <script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script> <script type="text/javascript"> $(function() { // Проверяем запись в куках о посещении // Если запись есть - ничего не делаем if (!$.cookie('hiderolikmodal')) { // если cookie не установлено появится окно // с задержкой 10 секунд var delay_popup = 10000; setTimeout("document.getElementById('overlay').style.display='block'", delay_popup); } // Запоминаем в куках, что посетитель уже заходил }); </script> <!--Конец Всплывающий баннер-->

Количество показов: 8893




Возврат к списку