Такие окна по своей сути имеют плюсы, потому как хоть маленькую, но все таки пользу в виде увеличения конверсии они несут, кто-бы что не говорил. Минус конечно тоже есть, в том что иногда посетителям не нравится что-то всплывающее, но все же оно появляется когда человек покидает сайт и не блокирует никаких кнопок браузера, так что если человек просто продолжит действие и закроет страницу, его ничто не остановит. Хотя недавно на меня один посетитель вылил всю свою ненависть за окошко о просьбе отключить рекламу. Он пришел за бесплатной информацией, а его величество попросили не блокировать рекламу 🙂
В таких всплывающих окнах часто размещают предложение вступить в группу в соц сетях, благодарность за посещение сайта, рекламу продукта или предложение о помощи, если человек чего-то не нашел ну тд.
Результат того что получится можно посмотреть ниже. Единственное что, окно не будет работать в IE. Для меня это вообще не проблема, потому как я года три абсолютно не считаюсь с пользователями, использующими Internet Explorer. На улице 21 век 2017 год и пользоваться ИЕ - признак не большого ума. Если в реальной жизни Вы не можете позволить себе премиум авто или квартиру из за обстоятельств жизни это да, но насиловать себя использованием Internet Explorer, вместо современных и мегаудобных браузеров, это явно не нормально 🙂
Наше окно будет использовать jQuery поэтому нужно убедится что на вашем сайте подключена библиотека. Обычно это делается в шапке сайта перед закрывающимся head или в подвал перед закрывающимсяbody. Выглядит строка с библиотекой, примерно так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Если схожей нет, то добавьте эту в указанное ранее место.
Далее размещаете скрипт, который и будет совершать появление окна, когда курсор покидает область страницы. Как видите, скрипт простейший до невозможности.
<script>
$(document).mouseleave(function(){$('#cls_ctnr').show();});
</script>
Особых настроек тут нет. Просто указываете в скрипте ID самого окна, которое должно появится. В нашем случаи это - #cls_ctnr.
Далее добавляете само окно и стили к нему. Окно добавляете в любое место на сайте, как по мне то лучше в подвал сайта.
<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>
Пример модального окна, всплывающего при закрытии вкладки.
</div>
</div>
Окно обычное, по сути это контейнер cls_ctnr, который делает затемнение и внутри него - посередине окно cls_pop. Также внутри есть кнопка cls_close, закрывающая окно. Внутрь окна можете размещать все что угодно.
Стили окна добавляете в файл стилей, обычно это style.css, если не особо разбираетесь в CSS, то добавляйте в самый конец.
#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 10px 10px;
min-height:200px;
max-width:450px;
display: inline-block;
vertical-align: middle;
position:relative;
text-align: center;
background:#E92C32;
color:#fff;
}
#cls_pop h4{
margin:0;
text-align:center;
font-size:15px;
}
.cls_close{
display:block;
position:absolute;
background:#292C33;
top:0;
left:50%;
margin-left:-25px;
line-height:25px;
font-weight:bold;
width:50px;
height:25px;
text-align:center;
color:#fff;
cursor:pointer;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;}
.cls_close:hover{
background:#fc0;
color:#000;}
Стили можете менять под себя, все зависит от Вашей фантазии. Если все сделаете правильно, то результат не заставит себя ждать.
На этом все, спасибо за внимание. 🙂
