Найпростіше модальне вікно на JavaScript

Сьогодні ми створимо найпростіше модальне вікно, використовуючи тільки чистий JavaScript та трохи HTML/CSS. Урок розрахований на новачків, тому і код буде максимально простим, щоб зрозуміти основний принцип створення подібних скриптів. Але його спокійно можна буде використати в своєму проекті.

І відразу демо, для наочності, що ми збираємося зробити:

Демо

Ідея в тому, щоб натискаючи на кнопку, користувач бачив блок з інформацією. При кліку на хрестик або темну область за блоком - він закривався. Тож давайте приступати.

У нас буде три файлики: index.html з кнопкою та самим блоком, який будемо показувати; script.js з кодом, який буде власне займатися показом/закриттям модального вікна; style.css зі стилями для нашої сторінки.

Почнемо з верстки. Спочатку вставляємо базову розмітку і не забуваємо під'єднати файли зі стилями та скриптом:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Модальне вікно</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="script.js"></script>
</head>
<body>

</body>
</html>

Тепер нам треба додати саму кнопку, по кліку на яку в нас і буде показуватися модальне вікно:

<button id="btn">Натисни на мене</button>

Також даємо кнопці ідентифікатор, за допомогою якого у скрипті будемо відстежувати, коли користувач натисне на неї.

Далі записуємо сам блок modal з інформацією, в який додаємо абзац для прикладу та тег span, який буде закривати наше модальне вікно. Код &times; створює гарний хрестик. Ще нам треба обгорнути все це дійство у блок з ідентифікатором wrapper. Бачили колись як на сайті після відкриття модального вікна на фоні з'являється такий цікавій напівпрозорий чорний фон, після кліку на який закривається вікно, щоб користувачу не треба було цілитися на хрестик? Так ось цим блоком і буде в нас wrapper. І хоча ціллю у нас є показати modal, що вміщує корисний контент, який ми хочемо показати користувачеві, за допомогою скрипта показувати/ховати ми будемо саме обгортку wrapper, яка буде містити і фон, і саме модальне вікно з контентом.

Ось кінцевий варіант index.html:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Модальне вікно</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="script.js"></script>
</head>
<body>

	<button id="btn">Натисни на мене</button>

	<div id="wrapper">
		<div id="modal">
			<span id="close">&times;</span>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>

</body>
</html>

Зараз можна взятися за стилізування. Відкриваємо наш файл зі стилями та перш за все прописуємо оформлення для обгортки.

#wrapper {
	display: none;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

За допомогою display: none; ховаємо блок зі сторінки(оскільки він є обгорткою для модального вікна, ховається і воно). Тобто у коді він залишається, але від очей користувача схований. Далі позиціюємо його, щоб коли користувач відкриє модальне вікно, і пробує прокрутити сторінку, прокручувалася тільки сама сторінка, а блок wrapper залишався на одному місці. За допомогою наступних чотирьох рядків, ми розташовуємо його у верхньому лівому кутку та розтягуємо на всю висоту та ширину екрану.

І нарешті ми задаємо фон. Розширення rgba() складається з 4 параметрів. Перші три означають колір(у нашому випадку 0, 0,0 - чорний) а четвертий - ступінь прозорості, еквівалент властивості opacity. От тільки остання робить напівпрозорими і потомки елементу. Наш rgba() ж робить прозорим тільки наш елемент і ніяк не впливає на нащадків - блок modal з інформацією.

Далі власне наше модальне вікно:

#modal {
	background-color: #fefefe;
	border: 1px solid #dddddd;
	padding: 16px;
	width: 75%;
	margin: 17% auto 0 auto;
}

Тут все просто. Робимо трохи сіруватий фон, рамку та внутрішні відступи для красоти. Далі задаємо ширину(75% від ширини екрану), центруємо його горизонтально, додаємо невеличкий відступ згори. І не забуваємо про наш хрестик:

#close {
	float: right;
	color: #ff0000;
	font-size: 30px;
	font-weight: bold;
	cursor: pointer;
}

Тепер він обтікає вміст і прибився до правого краю. А далі просто для красоти виставляємо червоний колір, розмір, робимо його жирним. cursor: pointer; робить так, щоб при наведенні мишкою замість стандартного курсора показувалася рука, як при наведенні на посилання.

А зараз найцікавіше - JavaScript. Оживимо, так кажучи, нашу сторінку! Спочатку оголошуємо три змінні, які будуть приймати нашу обгортку, кнопку і хрестик, щоб далі у коді прописувати просто ім'я змінної замість повного document.getElementById('').

var wrapper = document.getElementById('wrapper'); // обгортка
var btn = document.getElementById('btn'); // сама кнопка
var close = document.getElementById('close'); // хрестик у модальному вікні

Далі вказуємо, що при кліку на елемент з ідентифікатором btn(наша кнопка) присвоїти обгортці display: block;, іншими словами показуємо її користувачеві, разом із вмістом - модальним вікном.

btn.onclick = function() {
	wrapper.style.display = 'block';
}

Тепер дописуємо функцію, яка буде спрацьовувати, коли користувач натискає на хрестик:

close.onclick = function() {
	wrapper.style.display = 'none';
}

І останній штрих: функція при натиску на напівпрозорий блок wrapper. Тут ми просто перевіряємо кожний натиск користувача на сторінці. Під час події, такій як у нашому випадку onclick, інформація про неї записується у об'єкт, який прописаний параметром функції, котра має спрацьовувати, коли відбувається ця подія. У нашому коді - це параметр event. Властивість event.target зберігає елемент, який спровокував подію. Тобто у нашому випадку - це елемент на який користувач натиснув. І далі йде перевірка чи цей елемент є тим блоком з прозорим фоном wrapper. Якщо так - ховаємо всю обгортку:

window.onclick = function(event) {
	if ( event.target == wrapper ) {
		wrapper.style.display = 'none';
	}
}

Тепер у нас є робочий варіант простого...найпростішого модального вікна на чистому JavaScript. За бажанням код можна і далі покращувати, але це вже тема для наступних постів.

І ще раз посилання на демо, кому ліньки прокручувати догори.

Демо

Дякую за увагу. Якщо ви знайшли помилку або маєте свій варіант коду - пишіть у коментарях. Успіхів! :)