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

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

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

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

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

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

<html>
<body>
<head>
<!-- Подключаем Bootstrap -->
<link rel='stylesheet' id='mts_bootstrap-css'  href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css?ver=1.0' type='text/css' media='all' />
</head>
<div id="stop-modal" class="modal fade show">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Стоп-форма</h5>
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form action="https://maindot.ru/" method="POST">
					<div class="form-content">
						<div class="form-row">
							<div class="col-md-12">
								<div class="form-group">
									<input type="text" name="name" class="form-control" title="" value="" placeholder="Ваше имя" />
								</div>
								<div class="form-group">
									<input type="tel" name="phone" class="form-control" title="" value="" placeholder="Ваше телефон" />
								</div>
								<div class="form-group">
									<input type="text" name="email" class="form-control" title="" value="" placeholder="Ваше E-mail" />
								</div>	
							</div>
							<div class="col-md-12">
								<input type="submit" class="btn btn-primary" value="Отправить">
							</div>
					</div>
				</form>
			</div>
		</div>	
	</div>
</div>

<!-- Подключаем jQuery -->
<script type='text/javascript' src='http://code.jquery.com/jquery-3.3.1.min.js?ver=1.0'></script>

<!-- Подключаем js-файл Bootstrap -->
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js?ver=1.0'></script>

<!-- Функция Стоп-формы -->
<script>
function stopModal(){
	$("#stop-modal").modal('show');
}
setTimeout(stopModal, 10000); // время в мс
</script>

</body>
</html>

За вызов формы отвечает вот эта небольшая 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();
});

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

Здесь есть программа для автоматизации магазина

Полный код:

<html>
<body>
<head>
<!-- Подключаем Bootstrap -->
<link rel='stylesheet' id='mts_bootstrap-css'  href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css?ver=1.0' type='text/css' media='all' />
</head>
<div id="stop-modal" class="modal fade show">
	<div class="modal-dialog modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Стоп-форма</h5>
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<form action="https://maindot.ru/" method="POST">
					<div class="form-content">
						<div class="form-row">
							<div class="col-md-12">
								<div class="form-group">
									<input type="text" name="name" class="form-control" title="" value="" placeholder="Ваше имя" />
								</div>
								<div class="form-group">
									<input type="tel" name="phone" class="form-control" title="" value="" placeholder="Ваше телефон" />
								</div>
								<div class="form-group">
									<input type="text" name="email" class="form-control" title="" value="" placeholder="Ваше E-mail" />
								</div>	
							</div>
							<div class="col-md-12">
								<input type="submit" class="btn btn-primary" value="Отправить">
							</div>
					</div>
				</form>
			</div>
		</div>	
	</div>
</div>

<!-- Подключаем jQuery -->
<script type='text/javascript' src='http://code.jquery.com/jquery-3.3.1.min.js?ver=1.0'></script>

<!-- Подключаем js-файл Bootstrap -->
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js?ver=1.0'></script>

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

</body>
</html>

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Версия сайта для слабовидящих на jQuery и плагин WordPress

Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее

jQuery data-* атрибуты

data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее

Как сделать в Bootstrap 5 колонок

Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее

Закрепить блок при прокрутке

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

Многоуровневое меню CSS

Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее

Версия страницы для печати или печать отдельного блока на сайте

В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее

Кнопка наверх для сайта

Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее

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

Поиск
Категории
Теги
ACF Ajax amoCRM Bootstrap CentOS Git Instagram jQuery MacOS MySQL SEO Telegram YouTube Битрикс24 Яндекс
Подписаться