На создание данного урока меня подтолкнул один начинающий разработчик. Красивого дизайна здесь не будет, суть урока показать принцип создания таких окон.
По своей сути модальное окно - независимый от содержимого страницы блок, следовательно, лежит он сразу в теге body (обычно в самом низу, на одном уровне с контейнером). Логика будет писаться на чистом Javascript, даже не на Jquery (потому что вот).
Для начала сделаем простую верстку шаблона страницы с модальным окном. На странице у нас присутствует кнопка открытия модального окна и само модальное окно. Модальное окно содержит в себе шапку и тело, а также кнопку его закрытия.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Модальное окно</title>
<!-- Стили модального окна -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Кнопка для открытия модального окна -->
<button class="modal-open" data-name="first">Открыть окно</button>
<!-- Фон всех модальных окон -->
<div id="modal-bg"></div>
<!-- Модальное окно -->
<div class="modal" data-name="first">
<div class="modal-header">
Модальное окно <span class="modal-close">×</span>
</div>
<div class="modal-body">
Тело модального окна
</div>
</div>
<!-- Логика работы модального окна -->
<script src="script.js"></script>
</body>
</html>
Чтобы как-то визуально выделить окно и его фон, напишем немного простых стилей. Заметьте, что для фона модального окна используется идентификатор, потому что для любого количества окон его хватит нам одного.
#modal-bg {
display: none;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
cursor: pointer;
}
.modal {
display: none;
width: 500px; height: 250px;
border: 1px solid #0c4128;
position: absolute;
top: calc(50% - 125px);
left: calc(50% - 250px);
border-radius: 5px;
margin: 0 auto;
z-index: 2;
background-color: #fff;
}
.modal-header {
padding: 0 10px;
height: 30px;
line-height: 30px;
border-bottom: 1px solid #0c4128;
}
.modal-close {
font-size: 20px;
float: right;
cursor: pointer;
width: 20px; height: 20px;
margin-top: 5px;
line-height: 20px;
text-align: center;
}
.modal-close:hover {
color: rgba(0, 0, 0, .5);
}
.modal-body {
width: 480px;
height: 200px;
padding: 10px;
}
И, наконец, сама логика работы, магия модального окна. По сути на нажатие кнопки у нас вылазит фон поверх контента, а поверх фона модальное окно. По нажатию на фон все открытые модальные окна закрываются, по нажатию на крестик в форме закрывается только модальное окно на крестик которого нажали. Режим Javascript у нас строгий (strict), ошибок не прощаем. Код модального окна представлен ниже.
(function () {
"use strict";
// Кнопка открытия модалки
let $buttons = document.querySelectorAll('.modal-open');
// Фон модального окна
let $modalBg = document.getElementById('modal-bg');
// Вешаем событие закрытия всех модальных окон
$modalBg.addEventListener('click', function (){
$modalBg.style.display = 'none';
let $modalsOnPage = document.querySelectorAll('.modal');
for (let i = 0; i < $modalsOnPage.length; i++) {
$modalsOnPage[i].style.display = 'none';
}
});
// Событие на открытие модального окна (вешаем на все кнопки, чтобы модалки открывать)
for (let i = 0; i < $buttons.length; i++) {
$buttons[i].addEventListener('click', function () {
$modalBg.style.display = 'block';
let $modal = document.querySelector(`.modal[data-name="${$buttons[i].dataset.name}"]`)
if ($modal) {
$modal.style.display = 'block';
}
});
}
// Вешаем событие на закрытие модалок
let $modalClose = document.querySelectorAll('.modal-close');
for (let i = 0; i < $modalClose.length; i++) {
$modalClose[i].addEventListener('click', function () {
$modalClose[i].parentElement.parentElement.style.display = 'none';
$modalBg.style.display = 'none';
});
}
})()
Готово! У вас получилось сделать простейшее модальное окно. Его стили не зависят от содержимого страницы, можно сделать его любым и оно никак не повлияет на сайт, хотя если постараться, можно и сайт поломать.
Дата публикации: 6 апреля 2022 г. 11:59
Категория: Мини-уроки