X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Всплывающие модальные окна при закрытии вкладки

Приклад
  • 2024-03-28
  • 16398 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Недавно наткнулся на одну интересную штуку. Искал я материал для интересных модальных окон с одной встроенной функцией, о которой я расскажу в следующих статьях и наткнулся на окошко, которое появляется, когда посетитель хочет закрыть вкладку, окно браузера или просто покинуть страницу. Оно не блокирует кнопки и не вызывает ужасный звук "ТЫ-ДЫН", просто появляется когда курсор покидает область страницы. Так же на днях мне в комментариях задали вопрос, как осуществить схожую задумку, поэтому эта статья будет про модальное окно, которое появляется если закрывать вкладку.

Всплывающие модальные окна при закрытии вкладки

Такие окна по своей сути имеют плюсы, потому как хоть маленькую, но все таки пользу в виде увеличения конверсии они несут, кто-бы что не говорил. Минус конечно тоже есть, в том что иногда посетителям не нравится что-то всплывающее, но все же оно появляется когда человек покидает сайт и не блокирует никаких кнопок браузера, так что если человек просто продолжит действие и закроет страницу, его ничто не остановит. Хотя недавно на меня один посетитель вылил всю свою ненависть за окошко о просьбе отключить рекламу. Он пришел за бесплатной информацией, а его величество попросили не блокировать рекламу 🙂

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

Результат того что получится можно посмотреть ниже. Единственное что, окно не будет работать в 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;}

Стили можете менять под себя, все зависит от Вашей фантазии. Если все сделаете правильно, то результат не заставит себя ждать.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 7, в среднем: 5 из 5
Читайте також