1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Всплывающее окно при закрытии сайта на куках

Автор
waak
написать автору
пожаловаться
ID материала № 57
Авторwaak
CMSuCoz
Просмотров 100
Добавлено 16.12.2018
Комментариев 0

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

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

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

Установка


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

Код
<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>

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

Как вы могли заметить что код выше видёть на файл который лежит у нас на сайте вы можете его просто сохранить к себе на пк и после залить к себе на сайт но при этом не забудьте сменить путь к файлу на тот что получится у вас
0 2
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация