Как сделать модальное окно HTML: подробная инструкция и примеры

<!-- Кнопка для открытия модального окна -->
<button id="openModal">Открыть модальное окно</button>

<!-- Модальное окно -->
<div id="modalOverlay" class="modal-overlay">
<div class="modal-window">
<div class="modal-header">
<h3>Заголовок модального окна</h3>
<span class="close-btn" id="closeModal">&times;</span>
</div>
<div class="modal-content">
<p>Здесь размещается содержимое модального окна. Это может быть текст, 
изображения, формы и другие элементы.</p>
</div>
<div class="modal-footer">
<button class="btn-primary">Подтвердить</button>
<button class="btn-secondary" id="cancelModal">Отмена</button>
</div>
</div>
</div>

/* Стили для оверлея (подложки) */
.modal-overlay {
display: none; /* По умолчанию скрыто */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный фон */
z-index: 1000; /* Высокий z-index для отображения над другими элементами */
justify-content: center;
align-items: center;
}

/* Стили для контейнера модального окна */
.modal-window {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
max-width: 500px;
width: 90%;
position: relative;
animation: modalFadeIn 0.3s ease-out;
}

/* Стили для заголовка модального окна */
.modal-header {
padding: 15px 20px;
border-bottom: 1px solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
}

.modal-header h3 {
margin: 0;
color: #333;
}

/* Стили для кнопки закрытия */
.close-btn {
font-size: 24px;
font-weight: bold;
color: #888;
cursor: pointer;
transition: color 0.2s;
}

.close-btn:hover {
color: #333;
}

/* Стили для содержимого модального окна */
.modal-content {
padding: 20px;
max-height: 70vh; /* Максимальная высота для скролла */
overflow-y: auto; /* Добавление скролла при необходимости */
}

/* Стили для футера модального окна */
.modal-footer {
padding: 15px 20px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: flex-end;
gap: 10px;
}

/* Анимация появления модального окна */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Стили для показа модального окна */
.modal-overlay.active {
display: flex; /* Меняем на flex для центрирования */
}

/* Стили для кнопок */
.btn-primary, .btn-secondary {
padding: 8px 16px;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}

.btn-primary {
background-color: #5c6bc0;
color: white;
border: none;
}

.btn-secondary {
background-color: #f5f5f5;
color: #333;
border: 1px solid #ddd;
}

.btn-primary:hover {
background-color: #3949ab;
}

.btn-secondary:hover {
background-color: #e9e9e9;
}

/* Адаптация для планшетов */
@media (max-width: 768px) {
.modal-window {
width: 95%;
max-width: 600px;
}
}

/* Адаптация для мобильных устройств */
@media (max-width: 480px) {
.modal-window {
width: 100%;
border-radius: 0;
height: 100%;
max-height: 100vh;
}

.modal-header {
padding: 12px 15px;
}

.modal-content {
padding: 15px;
}

.modal-footer {
padding: 12px 15px;
flex-direction: column;
}

.btn-primary, .btn-secondary {
width: 100%;
padding: 12px 16px;
font-size: 16px;
}

.close-btn {
font-size: 30px; /* Увеличиваем для удобства тапа */
}
}

// Получаем необходимые элементы
const openModalButton = document.getElementById('openModal');
const modalOverlay = document.getElementById('modalOverlay');
const closeModalButton = document.getElementById('closeModal');
const cancelModalButton = document.getElementById('cancelModal');

// Функция открытия модального окна
function openModal() {
modalOverlay.classList.add('active');
document.body.style.overflow = 'hidden'; // Запрещаем прокрутку страницы
}

// Функция закрытия модального окна
function closeModal() {
modalOverlay.classList.remove('active');
document.body.style.overflow = ''; // Разрешаем прокрутку страницы
}

// Обработчики событий для кнопок
openModalButton.addEventListener('click', openModal);
closeModalButton.addEventListener('click', closeModal);
cancelModalButton.addEventListener('click', closeModal);

// Закрытие модального окна при клике на оверлей
modalOverlay.addEventListener('click', function(event) {
if (event.target === modalOverlay) {
closeModal();
}
});

// Закрытие модального окна при нажатии Escape
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape' && modalOverlay.classList.contains('active')) {
closeModal();
}
});

function trapFocus(element) {
const focusableElements = element.querySelectorAll(
'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select'
);

const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length – 1];

// Фокусируемся на первом элементе при открытии
firstElement.focus();

// Ловушка фокуса с помощью Tab
element.addEventListener('keydown', function(e) {
if (e.key === 'Tab') {
// Если нажат Shift+Tab на первом элементе, переходим к последнему
if (e.shiftKey && document.activeElement === firstElement) {
e.preventDefault();
lastElement.focus();
} 
// Если нажат Tab на последнем элементе, переходим к первому
else if (!e.shiftKey && document.activeElement === lastElement) {
e.preventDefault();
firstElement.focus();
}
}
});
}

// Вызываем функцию при открытии модального окна
function openModal() {
modalOverlay.classList.add('active');
document.body.style.overflow = 'hidden';
trapFocus(document.querySelector('.modal-window'));
}

<button data-modal-target="modal1">Открыть окно 1</button>
<button data-modal-target="modal2">Открыть окно 2</button>

<div id="modal1" class="modal-overlay">
<div class="modal-window">
<!-- Содержимое первого модального окна -->
<span class="close-btn" data-close-modal>&times;</span>
</div>
</div>

<div id="modal2" class="modal-overlay">
<div class="modal-window">
<!-- Содержимое второго модального окна -->
<span class="close-btn" data-close-modal>&times;</span>
</div>
</div>

// Открытие модального окна с использованием data-атрибутов
document.querySelectorAll('[data-modal-target]').forEach(button => {
button.addEventListener('click', () => {
const modal = document.getElementById(button.dataset.modalTarget);
openModal(modal);
});
});

// Закрытие модального окна
document.querySelectorAll('[data-close-modal]').forEach(element => {
element.addEventListener('click', () => {
const modal = element.closest('.modal-overlay');
closeModal(modal);
});
});

function openModal(modal) {
if (modal == null) return;
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}

function closeModal(modal) {
if (modal == null) return;
modal.classList.remove('active');
document.body.style.overflow = '';
}

function createModal(title, content, buttons) {
// Создаем элементы модального окна
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';

const modalWindow = document.createElement('div');
modalWindow.className = 'modal-window';

// Создаем заголовок
const header = document.createElement('div');
header.className = 'modal-header';

const headerTitle = document.createElement('h3');
headerTitle.textContent = title;

const closeBtn = document.createElement('span');
closeBtn.className = 'close-btn';
closeBtn.innerHTML = '×';
closeBtn.addEventListener('click', () => overlay.remove());

header.appendChild(headerTitle);
header.appendChild(closeBtn);

// Создаем содержимое
const modalContent = document.createElement('div');
modalContent.className = 'modal-content';
modalContent.innerHTML = content;

// Собираем модальное окно
modalWindow.appendChild(header);
modalWindow.appendChild(modalContent);

// Добавляем кнопки, если они указаны
if (buttons && buttons.length > 0) {
const footer = document.createElement('div');
footer.className = 'modal-footer';

buttons.forEach(btn => {
const button = document.createElement('button');
button.className = btn.class || 'btn-secondary';
button.textContent = btn.text;
button.addEventListener('click', () => {
if (typeof btn.callback === 'function') {
btn.callback();
}

if (btn.closeModal) {
overlay.remove();
}
});

footer.appendChild(button);
});

modalWindow.appendChild(footer);
}

overlay.appendChild(modalWindow);
document.body.appendChild(overlay);

// Открываем модальное окно
setTimeout(() => overlay.classList.add('active'), 10);

return overlay;
}

// Пример использования
const showConfirmation = () => {
createModal(
'Подтверждение действия',
'<p>Вы уверены, что хотите удалить этот элемент?</p>',
[
{
text: 'Да, удалить',
class: 'btn-primary',
closeModal: true,
callback: () => console.log('Элемент удален!')
},
{
text: 'Отмена',
closeModal: true
}
]
);
};

// Вызов функции
document.getElementById('deleteItem').addEventListener('click', showConfirmation);

// Упрощенный пример многоуровневого модального окна
const registrationSteps = [
{
title: 'Шаг 1: Личная информация',
content: `
<div class="form-group">
<label for="name">Имя:</label>
<input type="text" id="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
`,
validateFn: () => {
// Проверка заполнения полей
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
return name && email;
}
},
{
title: 'Шаг 2: Выбор тарифа',
content: `
<div class="plan-options">
<div class="plan">
<input type="radio" name="plan" id="basic" value="basic" checked>
<label for="basic">Базовый</label>
</div>
<div class="plan">
<input type="radio" name="plan" id="pro" value="pro">
<label for="pro">Профессиональный</label>
</div>
</div>
`,
validateFn: () => true // Всегда валидный, т.к. есть выбор по умолчанию
},
{
title: 'Шаг 3: Подтверждение',
content: `
<p>Проверьте введенные данные:</p>
<div id="summary"></div>
`,
onShow: () => {
// Заполняем сводку данными из предыдущих шагов
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const plan = document.querySelector('input[name="plan"]:checked').value;

document.getElementById('summary').innerHTML = `
<p><strong>Имя:</strong> ${name}</p>
<p><strong>Email:</strong> ${email}</p>
<p><strong>Тариф:</strong> ${plan === 'basic' ? 'Базовый' : 'Профессиональный'}</p>
`;
}
}
];

// Функция для показа многоуровневого модального окна
function showMultiStepModal(steps) {
let currentStep = 0;
const modal = createBasicModal();

function updateStep() {
const step = steps[currentStep];
modal.querySelector('.modal-header h3').textContent = step.title;
modal.querySelector('.modal-content').innerHTML = step.content;

// Вызываем onShow, если определен
if (typeof step.onShow === 'function') {
step.onShow();
}

// Обновляем кнопки в зависимости от текущего шага
const footer = modal.querySelector('.modal-footer');
footer.innerHTML = '';

if (currentStep > 0) {
const backBtn = document.createElement('button');
backBtn.className = 'btn-secondary';
backBtn.textContent = 'Назад';
backBtn.addEventListener('click', () => {
currentStep--;
updateStep();
});
footer.appendChild(backBtn);
}

const nextBtn = document.createElement('button');
nextBtn.className = 'btn-primary';
nextBtn.textContent = currentStep === steps.length – 1 ? 'Завершить' : 'Далее';
nextBtn.addEventListener('click', () => {
// Проверяем валидность текущего шага
if (typeof step.validateFn === 'function' && !step.validateFn()) {
alert('Пожалуйста, заполните все обязательные поля');
return;
}

if (currentStep === steps.length – 1) {
// Последний шаг – завершаем
submitForm();
modal.remove();
} else {
// Переходим к следующему шагу
currentStep++;
updateStep();
}
});

footer.appendChild(nextBtn);
}

function submitForm() {
// Логика отправки формы
console.log('Форма отправлена!');
}

// Инициализация первого шага
updateStep();

return modal;
}