Как на чистом JavaScript создать простое модальное окно без библиотек?

Создание простого модального окна на чистом JavaScript

• DOM: формируем контейнер модалки, затемняющий фон и область содержимого
• CSS: задаём fixed-позиционирование, затемнение страницы и выравнивание по центру
• JavaScript: добавляем элементы в body и переключаем отображение через style.display
• Клики: закрываем окно нажатием на фон или кнопку "закрыть"
• Фокус и прокрутка: на время открытия блокируем скролл страницы
• Лёгкая реализация: никаких библиотек, только независимый JavaScript-код
• Применение: уведомления, подтверждения действий и формы ввода

Подробный ответ

Основной ответ

Простое модальное окно на чистом JavaScript создаётся динамически: в DOM добавляются элементы затемняющего фона и самого окна, после чего скрипт управляет их отображением и обработкой действий пользователя. Для базового UX важно заблокировать фон, предусмотреть закрытие по клику вне модалки и по кнопке, а также корректно работать с фокусом для доступности.

Ключевые моменты

• Структура HTML/CSS: создаются оверлей с полупрозрачным фоном и контейнер модального окна с контентом. Оверлей фиксируется и растягивается на всю видимую область, блокируя взаимодействие с основной страницей.
• Создание и управление через JavaScript: элементы добавляются в DOM при помощи document.createElement, а обработчики кликов на фоне и кнопке закрытия меняют состояние модалки через display или visibility.
• Фокус и доступность: после открытия фокус желательно перевести на окно либо первый интерактивный элемент, а после закрытия — вернуть прежнему элементу. Фоновую прокрутку также следует отключить, задав overflow: hidden для body.

Практический контекст

Этот вариант подходит для небольших проектов и компонентов, где не подключены фреймворки. В крупных системах чаще используют готовые UI-решения — например, модалки Bootstrap или собственные React-компоненты, — чтобы надёжнее реализовать а11y и анимации. При этом реализация "с нуля" помогает понять внутреннюю механику.

Пример кода для создания простого модального окна:

// Создаем элементы
const overlay = document.createElement('div');
overlay.style = `
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.5); display: flex; justify-content: center;
align-items: center; z-index: 9999;
`;

const modal = document.createElement('div');
modal.style = `
background: white; padding: 20px; border-radius: 8px;
max-width: 400px; width: 100%;
`;

modal.innerHTML = `<p>Это простое модальное окно</p><button id="closeBtn">Закрыть</button>`;

// Добавляем в DOM
overlay.appendChild(modal);
document.body.appendChild(overlay);

// Убираем скролл на фоне
document.body.style.overflow = 'hidden';

// Закрытие по кнопке
document.getElementById('closeBtn').onclick = () => {
document.body.removeChild(overlay);
document.body.style.overflow = '';
};

// Закрытие по клику вне модалки
overlay.onclick = (e) => {
if (e.target === overlay) {
document.body.removeChild(overlay);
document.body.style.overflow = '';
}
};

Таким образом создается простой, функциональный модал, который можно расширять по необходимости.