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();
});