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

18 февраля 2020 CSS HTML JavaScript jQuery

Стоп-форма — это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page.

Стоп-форма по таймеру

Рассмотрим пример вплывающего окна с формой на Bootsrap, которое вызывается если пользователь находится на странице более 10 сек:

                                
                                        ×
                                
                        
                        
                                
                                        
                                                
                                                        
                                                                
                                                                        
                                                                
                                                                
                                                                        
                                                                
                                                                
                                                                        
                                                                    
                                                        
                                                        
                                                                
                                                        
                                        
                                
                        
                    
        










function stopModal(){
        $("#stop-modal").modal('show');
}
setTimeout(stopModal, 10000); // время в мс

За вызов формы отвечает вот эта небольшая JavaScript функция:

function stopModal(){
        $("#stop-modal").modal('show');
}
setTimeout(stopModal, 10000); // время в мс

Стоп-форма при закрытии страницы

Заменим функцию таймера на следующий код:

// Вызываем окно если курсор мыши вышел за границы страницы
$(document).mouseleave(function(e){
    if (e.clientY < 0) {
        $("#stop-modal").modal('show');
    }    
});
// Если стоп-форму закрыли, то удаляем её, чтобы она больше не срабатывала
$('#stop-modal').on('hidden.bs.modal', function () {
    $("#stop-modal").remove();
});

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

Полный код:

                                
                                        ×
                                
                        
                        
                                
                                        
                                                
                                                        
                                                                
                                                                        
                                                                
                                                                
                                                                        
                                                                
                                                                
                                                                        
                                                                    
                                                        
                                                        
                                                                
                                                        
                                        
                                
                        
                    
        










// Вызываем окно если курсор мыши вышел за границы страницы
$(document).mouseleave(function(e){
    if (e.clientY < 0) {
        $("#stop-modal").modal('show');
    }    
});
// Если стоп-форму закрыли, то удаляем её, чтобы она больше не срабатывала
$('#stop-modal').on('hidden.bs.modal', function (e) {
    $("#stop-modal").remove();
});