форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
16-12-2018 в 02:11 142

Всплывающее окно при закрытии сайта на куках


Всплывающее окно при закрытии сайта на куках
Всем привет вот тут на днях попросили собрать окошко которое будет появляться после того как мышка покидает область сайта и в нём будет выводится предложение на вступление в группы так вот хочу поделится им с вами!

не стал я делать ему какой-то уникальный дизайн а сделал просто белое окошко
так же хочется сказать что в данном скрипте я использую куки для того чтобы не показывать окошко пользователям которые нажали крестик что бы не надоедало и пользователи не сбежали с сайта

Установка


Код окошка размещаем в нижнюю часть сайта в самый конец

Код
<div id="cls_ctnr">
<div id="cls_pop">
<span class="cls_close" onclick="document.getElementById('cls_ctnr').style.display='none'; return false;">X</span>
<h4>ПОДПИСАТЬСЯ</h4>
Вступайте в нашу группу в соц. сетях
<br>
<div style="width: 140px;margin: 10px auto;">
  <a href="" class="okgruppok sssocok" title="Группа на одноклассниках"><img src="/img/okok.png"></a>
  <a href="" class="vkgruppok sssocok" title="Группа в вконтакте"><img src="/img/vkok.jpg"></a>
</div>
<dir style="clear: both;"></dir>
</div>  
</div>

Не забывайте сохранить!

Обратите внимание что в коде выше всего две группы одноклассники и вконтакте если вам нужно больше групп то просто скопируйте одну из уже имеющихся и добавьте ей свою картинку

Подключаем стили окошка в свою таблицу стилей в самый конец

Код
.sssocok {
  width: 60px;
  height: 60px;
  display:inline-block;
  float: left;
}
.sssocok img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.vkgruppok img {
  width: 45px;
  height: 45px;

}
.vkgruppok {
  margin: 7px;
}

#cls_ctnr{
display:none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
text-align: center;
z-index:9999;
}
   
#cls_ctnr::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: '';
}
   
#cls_pop{
padding:40px 30px 10px;
min-height:200px;
max-width:450px;
display: inline-block;
vertical-align: middle;
position:relative;
text-align: center;
background:#FFF;  
color:#434343;
}
   
#cls_pop h4{
margin:0;
text-align:center;
font-size:25px;
}
   
.cls_close{
display:block;
position:absolute;
background:#292C33;
top:10px;
right: 10px;
line-height:40px;
font-weight:bold;
width:40px;
height:40px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.cls_close:hover{
background: red;
color:#FFF;}

Не забывайте сохранить!

Теперь подключим скрипты для этого нам снова нужно в нижнею часть сайта затем скопировать код ниже и разместить под кодом окошка

Код
<script type="text/javascript">  
$(document).ready(function(){  
$(".cls_close").click(function () {  
$.cookie("popupok", "24house", {expires: 0} );  
$(document).mouseleave(function(){$('#cls_ctnr').hide();});  
});  
   
if ( $.cookie("popupok") == null ){
$(document).mouseleave(function(){$('#cls_ctnr').show();});
}  
else { $(document).mouseleave(function(){$('#cls_ctnr').hide();}); }  
});  
</script>

Не забывайте сохранить!

Теперь добавим сюда же в самый конец такую строчку

Код
<script src="http://talantlev.ucoz.ru/js/jquery.cookie.js"></script>

Не забывайте сохранить!

Как вы могли заметить что код выше видёть на файл который лежит у нас на сайте вы можете его просто сохранить к себе на пк и после залить к себе на сайт но при этом не забудьте сменить путь к файлу на тот что получится у вас

4

Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru