Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать появляющееся Модальное Окно

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

Как обычно, мы все будем делать по шагам.

ШАГ 1. Добавление HTML кода

Добавьте разметку модального окна в ваш html код:

<button class = "button">Кнопка вызова окна</button>
<div class="overlay js-overlay">
	<div class="popup js-popup">
		<h2>Заголовок Окна</h2>
		<p>Здесь должен присутствовать какой-то крайне привлекательный 
текст, который обязательно должен заставить посетителя сайта остаться на нем и 
купить что-то, что будет для него абсолютно ненужным, однаком мы сделаем 
иллюзию того, что это ему очень нужно и без этого его жизнь просто невозможна.</p>
		<div class="close-popup js-close"></div>
	</div>
</div>

ШАГ 2. Добавление CSS стилей

Добавьте себе css код представленный ниже:

.button 
{
	margin: 0 auto;
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: transparent;
	font-weight: bold;
	font-size: 24px;
	color: white;
	padding: 20px 30px;
	background-color: #ff7700;
	text-align: center;
	cursor: pointer;
} 
.overlay 
{
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .8);
	display: none;
}
.popup 
{
	position: absolute;
	width: 400px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 40px;
	box-sizing: border-box;
	background-color: #ff7700;
	color: #fff;
}
.popup h2
{
	text-align: center;
	font-weight: bold;
	font-size: 28px;
	padding: 20px;
}
.close-popup 
{
	position: absolute;
	top: 15px;
	right: 15px;
	width: 23px;
	height: 23px;
	cursor: pointer;
}
.close-popup:before 
{
	content: '';
	background-color: #fff;
	position: absolute;
	height: 1px;
	width: 31px;
	top: 11px;
	left: -4px;
	transform: rotate(-45deg);
}
.close-popup:after 
{
	content: '';
	background-color: #fff;
	position: absolute;
	height: 1px;
	width: 31px;
	top: 11px;
	transform: rotate(45deg);
	left: -4px;
}

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

ШАГ 3. Добавление JavaScript кода

И последним действием будет программирование нашего появляющегося модального окна. Добавьте себе такой javascript код:

//Открытие с помощью кнопки
$('.button').click(function() 
{ 
	$('.js-overlay').fadeIn();
	$('.js-overlay').addClass('disabled');
});

//Закрытие нажатием на крестик
$('.js-close').click(function() 
{ 
	$('.js-overlay').fadeOut();
});

//Закрытие нажатием вне окна
$(document).mouseup(function (e) 
{ 
	var popup = $('.js-popup');
	if (e.target!=popup[0]&&popup.has(e.target).length === 0)
	{
		$('.js-overlay').fadeOut();
	}
});

//Открытие по таймеру
$(window).on('load', function () 
{ 
	setTimeout(function()
	{
		if($('.js-overlay').hasClass('disabled')) 
		{
			return false;
		} 
		else 
		{
			$(".js-overlay").fadeIn();
		}
	}, 5000);
});

Итак, работает все максимально просто. Как мы видим, код отслеживает нажатия по кнопке, которая открывает модальное окно. Идет проверка нажатий пользователя после открытия модального окна. Его можно закрыть двумя способами: явным нажатием на крестик в нем или на пустую область вне окна.

Нижняя часть кода (24-38 строки) отвечает за открытие модального окна по таймеру после запуска страницы. Вы можете указать любое для вас подходящее время в строке 37. Примечание. Время в этой функции пишется в миллисекундах.

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



Оставьте свой комментарий внизу