Всем привет вот тут на днях попросили собрать окошко которое будет появляться после того как мышка покидает область сайта и в нём будет выводится предложение на вступление в группы так вот хочу поделится им с вами!
не стал я делать ему какой-то уникальный дизайн а сделал просто белое окошко
так же хочется сказать что в данном скрипте я использую куки для того чтобы не показывать окошко пользователям которые нажали крестик что бы не надоедало и пользователи не сбежали с сайта
Установка
Код окошка размещаем в нижнюю часть сайта в самый конец
Код
<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>
Не забывайте сохранить!
Как вы могли заметить что код выше видёть на файл который лежит у нас на сайте вы можете его просто сохранить к себе на пк и после залить к себе на сайт но при этом не забудьте сменить путь к файлу на тот что получится у вас
web_master 
