07.06.2012
Количество показов: 12514
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>
<!--Конец Всплывающий баннер-->
Количество показов: 12514
