Модальное окно при закрытии страницы сайта

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

Рассмотрим 2 варианта таких всплывающих окон.   

Суть в том, когда пользователь подводит курсор в верхнюю часть вкладки чтобы закрыть её, такое окно появится. 

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

Примет этого варианта можно увидеть на тестовом блоге. Зайдите на блог и затем подведите курсор к верху вкладки. 

Демонстрация 

Я вам дам весь скрипт целиком. Для работы всплывающего окна нам понадобится библиотека jQuery, разметка HTML, сами стили  CSS и не большой JAVASCRIPT.

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="exitblock">
<div class="fon"></div> 
<div class="modaltext">   
<h1>Aaaa...Не уходите!!!</h1>
<p><span style="color: #FF6347;  font-size: large;">Есть еще много статей на сайте, которые Вам могут понравиться!!! Останьтесь!!!</span></p>
<div align="center">
<img width="30%" border="0" src="https://cs8.livemaster.ru/storage/86/71/bdb58b31073019ce02401b21775j.gif" />
</div>
</div>
<div class="closeblock">+</div>
</div>

<style>
.exitblock {    
    display:none;    
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:100000;
}    
.exitblock .fon {
    background: #F6FCFF;
    opacity:.8;
    position:fixed;
    width:100%;
    height:100%;
}
.exitblock .modaltext {
    box-sizing: border-box;  
    padding:20px 40px;
    border: 2px solid #AEAEAE;
    background: #F6FCFF;
    position:fixed;
    top:80px;
    left:50%;
    margin-left:-30%;
    width:60%;
    box-shadow: 0 4px 10px 2px rgba(0,0,0,0.5);
}        
.closeblock {
    cursor:pointer;
    position: fixed;
    line-height:60px;
    font-size:82px;
    transform: rotate(45deg);
    text-align:center;
    top:20px;
    right:30px;
    color: #FF6347;    
}
.closeblock:hover {
    color: #000080;    
}</style>

<script>
$(document).mouseleave(function(e){
    if (e.clientY < 10) {
        $(".exitblock").fadeIn("fast");
    }    
});
$(document).click(function(e) {
    if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
        $(".exitblock").remove();
    }
});
</script>

Весь код целиком устанавливаем в гаджет HTML/JavaScript в любом месте шаблона блога. 

Вариант 2. Окно будет всплывать только 1 раз в сутки и если пользователь провёл на блоге меньше 20 секунд. Для реализации используются cookie. 

Устанавливаем куку через 20 секунд. Можно 10, 15 или больше, как пожелаете. Если посетитель провёл больше времени, окно не показывается.  Для этого поменяем только последний код JavaScript. Остальные коды библиотека jQuery, разметка HTML, сами стили  CSS оставляем как в первом варианте. 

<script>
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
function writeCookie() {
/
    var date = new Date;
    date.setDate(date.getDate() + 1);    
    document.cookie = "alertwin=no; path=/; expires=" + date.toUTCString();        
}    
var alertwin = getCookie("alertwin");
if (alertwin != "no") {
    window.setTimeout(function() { /
        if ($(".exitblock").is(':hidden')) { 
            $(".exitblock").remove();     
        }
        writeCookie(); 
// Устанавливаем куку через 20 секунд
    }, 20000);        
    $(document).mouseleave(function(e){
        if (e.clientY < 0) {
            $(".exitblock").fadeIn("fast");      
            writeCookie(); 
        }    
    });
    $(document).click(function(e) {
        if (($(".exitblock").is(':visible')) && (!$(e.target).closest(".exitblock .modaltext").length)) {
            $(".exitblock").remove();
        }
    });  
}
</script>

В коде HTML пишите свой текст, картинки, стили текста.  

<h1>Aaaa...Не уходите!!!</h1>
<p><span style="color: #FF6347;  font-size: large;">Есть еще много статей на сайте, которые Вам могут понравиться!!! Останьтесь!!!</span></p>
<div align="center">
<img width="30%" border="0" src="https://cs8.livemaster.ru/storage/86/71/bdb58b31073019ce02401b21775j.gif" />
</div>
</div>
<div class="closeblock">+</div>
</div>

Попробуйте использовать такие ненавязчивые и прикольные модальные окна на блоге.