X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2018-12-13
  • 5764 просмотр

    13 комментарий

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

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

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

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

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

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

Результат того что получится можно посмотреть ниже. Единственное что, окно не будет работать в 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
Проголосовало: 5, в среднем: 5 из 5
Читайте также
Опубликовано 13 комментариев

Добавить комментарий для Андрей Отменить ответ

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.