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

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

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

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

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

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

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

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


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

Опубликовано 6 комментариев

  • Андрей
    Комментариев: 8

    А можно ли сделать так, чтобы окно выскакивало только один раз, как реализовано в статье про всплывающие окна с задержкой? То есть по сути при попытке уйти с сайта человеку показалось окно, он его закрыл - куки записались и больше не выходит. Это нужно в том плане если человек не уходит, а переходит на другую (уже открытую вкладку) в своем браузере, и если при каждом движении мышкой наверх будет вылезать это окно, он просто уйдет с сайта...

  • Андрей
    Комментариев: 8

    Я только изучаю javascript , поэтому еще нет полного понимания картины...
    Как то так? Или здесь ошибка:
    $(document).ready(function(){
    $("#setCookie").click(function () {
    $.cookie("popup", "24house", {expires: 0} );
    $("#bg_popup").hide();
    });

    if ( $.cookie("popup") == null )
    {
    $(document).mouseleave(function(){
    $('#bg_popup').show();
    });
    }
    else { $("#bg_popup").hide();
    }
    });

    • Виталий
      Комментариев: 427

      Только не bg_popup, а cls_ctnr
      и не setCookie, а cls_close
      И в этом смысла нет ведь у вас в стилях прописано #cls_ctnr{display:none;
      else { $("#bg_popup").hide();
      }

  • Андрей
    Комментариев: 8

    Спасибо, огромное! То есть

    $(document).ready(function(){
    $(".cls_close").click(function () {
    $.cookie("popup", "24house", {expires: 0} );
    $("#cls_ctnr").hide();
    });

    if ( $.cookie("popup") == null )
    {
    $(document).mouseleave(function(){
    $('#cls_ctnr').show();
    });
    }
    });

    Окно появляется, куки записываются, но оно появляется каждый раз при обновлении страницы или переходе на другую, то есть по сути скрипт не срабатывает как надо. А нужно повторюсь только один раз в сутки.

  • Андрей
    Комментариев: 8

    Не совсем понятно куда копать

  • Андрей
    Комментариев: 8

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

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко