День 24 | Верстаем модальное окно на чистом JS — Продвинутый курс по верстке сайтов

Что такое модальное окно?

Модальное окно (modal) — это всплывающее окно, которое появляется поверх основного контента. Оно "блокирует" взаимодействие с остальной страницей, пока пользователь не закроет окно.

Где используются модальные окна?

Формы обратной связи
Подтверждение действий ("Вы уверены, что хотите удалить?")
Показ детальной информации
Галереи изображений
Вход/регистрация

Что такое "модальное"? "Модальное" означает, что окно требует действия от пользователя (закрыть, подтвердить, отменить) перед тем, как продолжить работу со страницей.

HTML структура модального окна

<!-- Кнопка для открытия -->
<button class="open-modal-btn">Открыть модальное окно</button>

<!-- Модальное окно -->
<div class="modal" id="myModal">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <button class="modal-close">×</button>
    <h2>Заголовок модального окна</h2>
    <p>Содержимое модального окна. Здесь может быть форма, текст или любой другой контент.</p>
    <button class="modal-btn">Действие</button>
  </div>
</div>

Разберём структуру:

modal — контейнер модального окна
modal-overlay — затемняющий слой (фон)
modal-content — само окно с контентом
modal-close — кнопка закрытия (обычно крестик ×)

Разбор CSS для модального окна

Позиционирование

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

Что такое position: fixed? Фиксированное позиционирование прикрепляет элемент к окну браузера. Элемент остаётся на месте при скролле.

top: 0; left: 0; right: 0; bottom: 0 — растягивает элемент на весь экран.

z-index: 1000 — поднимает модальное окно поверх всего контента. z-index работает только с элементами, у которых position не static.

Overlay (затемняющий слой)

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

Разберём:

position: absolute — позиционируется относительно родителя (modal)
rgba(0, 0, 0, 0.5) — чёрный цвет с прозрачностью 50%
backdrop-filter: blur(4px) — размывает фон за модальным окном (современный эффект)

Контент модального окна

.modal-content {
  position: relative;
  z-index: 1001;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

Разберём:

position: relative — для позиционирования кнопки закрытия
z-index: 1001 — поверх overlay (который имеет z-index: 1000)
max-width: 500px — максимальная ширина (на больших экранах не растягивается)
width: 90% — ширина 90% на маленьких экранах
max-height: 90vh — максимальная высота 90% высоты экрана
overflow-y: auto — если контент не помещается, появляется скролл

Что такое vh? vh (viewport height) — единица измерения, равная 1% высоты окна браузера. 90vh = 90% высоты экрана.

Разбор JavaScript кода

Метод open()

open() {
  this.modal.classList.add('active');
  document.body.style.overflow = 'hidden';
}

Что происходит:

Добавляем класс active — модальное окно становится видимым
document.body.style.overflow = 'hidden' — блокируем скролл страницы
- document.body — элемент <body> страницы
- style.overflow — CSS свойство overflow через JavaScript
- 'hidden' — скрывает скролл

Зачем блокировать скролл? Когда модальное окно открыто, пользователь не должен иметь возможность скроллить страницу под ним. Это улучшает UX и предотвращает путаницу.

Метод close()

close() {
  this.modal.classList.remove('active');
  document.body.style.overflow = '';
}

Убираем класс active и разблокируем скролл (пустая строка возвращает значение по умолчанию).

Закрытие по Escape

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && this.modal.classList.contains('active')) {
    this.close();
  }
});

Разберём:

keydown — событие нажатия клавиши
e — объект события (содержит информацию о событии)
e.key — какая клавиша была нажата
e.key === 'Escape' — проверяем, что нажата клавиша Escape
this.modal.classList.contains('active') — проверяем, что модальное окно открыто
Если оба условия истинны — закрываем модальное окно

Почему проверяем, что окно открыто? Чтобы не пытаться закрыть уже закрытое окно. Это хорошая практика — проверять состояние перед действием.

Закрытие по клику на overlay

this.overlay.addEventListener('click', () => this.close());

При клике на затемняющий фон (overlay) модальное окно закрывается. Это стандартное поведение — пользователи ожидают, что клик вне окна закроет его.

Важно: Нужно предотвратить закрытие при клике на само окно. Для этого используем event.stopPropagation():

this.modalContent.addEventListener('click', (e) => {
  e.stopPropagation(); // Останавливаем всплытие события
});

Что такое stopPropagation? События "всплывают" от дочерних элементов к родительским. Если мы кликнем на modal-content, событие дойдёт до overlay и закроет окно. stopPropagation() останавливает это всплытие.

Практическое задание

Создайте структуру модального окна
Стилизуйте overlay и контент
Реализуйте открытие и закрытие
Добавьте закрытие по клику на overlay
Добавьте закрытие по Escape
Реализуйте блокировку скролла body при открытом модальном окне
Добавьте анимацию появления
Предотвратите закрытие при клике на само окно (stopPropagation)

Что дальше?

Отлично! Модальное окно готово. В следующем уроке мы создадим форму с валидацией — это очень важный навык для любого веб-разработчика.

Материалы по теме

Глоссарий digital-терминов Глоссарий
Статьи блога по разработке и SEO Блог
Практические чеклисты по внедрению Чеклисты
Ваш сайт тормозит? Вот сколько денег вы теряете каждый день Статья

День 24 | Верстаем модальное окно на чистом JS

Что такое модальное окно?

HTML структура модального окна

Разбор CSS для модального окна

Позиционирование

Overlay (затемняющий слой)

Контент модального окна

Разбор JavaScript кода

Метод open()

Метод close()

Закрытие по Escape

Закрытие по клику на overlay

Практическое задание

Что дальше?

Материалы по теме

Оставить заявку