Модальные окна на сайте: создание, адаптация и примеры кода

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

<!-- Контейнер модального окна -->
<div id="myModal" class="modal">
<!-- Оверлей (затемненный фон) -->
<div class="modal-overlay"></div>

<!-- Содержимое модального окна -->
<div class="modal-content">
<span class="close-button">&times;</span>
<h2>Заголовок модального окна</h2>
<p>Здесь размещается содержимое вашего модального окна...</p>
<button class="modal-button">Подтвердить</button>
</div>
</div>

/* Стили для кнопки-триггера */
.modal-trigger {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

.modal-trigger:hover {
background-color: #45a049;
}

/* Базовые стили для модального окна */
.modal {
display: none; /* Скрыто по умолчанию */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

/* Оверлей (затемненный фон) */
.modal-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px); /* Эффект размытия для современных браузеров */
}

/* Содержимое модального окна */
.modal-content {
position: relative;
background-color: #fefefe;
margin: 10% auto;
padding: 25px;
width: 80%;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-50px);
opacity: 0;
transition: all 0.3s ease-in-out;
}

/* Анимация при открытии */
.modal.active .modal-content {
transform: translateY(0);
opacity: 1;
}

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

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

/* Стили для кнопки внутри модального окна */
.modal-button {
padding: 10px 20px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-top: 15px;
}

.modal-button:hover {
background-color: #0b7dda;
}

document.addEventListener('DOMContentLoaded', function() {
// Получаем элементы DOM
const modal = document.getElementById('myModal');
const openButton = document.getElementById('openModal');
const closeButton = document.querySelector('.close-button');
const overlay = document.querySelector('.modal-overlay');

// Функция для открытия модального окна
function openModal() {
modal.style.display = 'block';
// Добавляем класс active для анимации
setTimeout(() => {
modal.classList.add('active');
}, 10);
// Блокируем прокрутку страницы
document.body.style.overflow = 'hidden';
}

// Функция для закрытия модального окна
function closeModal() {
// Удаляем класс active для анимации закрытия
modal.classList.remove('active');
// Используем таймаут для ожидания завершения анимации
setTimeout(() => {
modal.style.display = 'none';
// Возвращаем возможность прокрутки
document.body.style.overflow = '';
}, 300);
}

// Обработчики событий
openButton.addEventListener('click', openModal);
closeButton.addEventListener('click', closeModal);

// Закрытие при клике на оверлей
overlay.addEventListener('click', function(e) {
// Проверяем, что клик был именно по оверлею, а не по содержимому
if (e.target === overlay) {
closeModal();
}
});

// Закрытие при нажатии клавиши Escape
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && modal.style.display === 'block') {
closeModal();
}
});
});

document.addEventListener('DOMContentLoaded', function() {
// Получаем все кнопки открытия модальных окон
const openButtons = document.querySelectorAll('[data-modal-target]');
const closeButtons = document.querySelectorAll('.close-button');
const overlays = document.querySelectorAll('.modal-overlay');

// Добавляем обработчики событий для каждой кнопки открытия
openButtons.forEach(button => {
button.addEventListener('click', () => {
// Получаем идентификатор модального окна из атрибута data-modal-target
const modalId = button.dataset.modalTarget;
const modal = document.getElementById(modalId);
openModal(modal);
});
});

// Добавляем обработчики событий для каждой кнопки закрытия
closeButtons.forEach(button => {
button.addEventListener('click', () => {
// Находим ближайшее модальное окно
const modal = button.closest('.modal');
closeModal(modal);
});
});

// Закрытие при клике на оверлей
overlays.forEach(overlay => {
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
const modal = overlay.closest('.modal');
closeModal(modal);
}
});
});

// Функции открытия и закрытия модального окна
function openModal(modal) {
modal.style.display = 'block';
setTimeout(() => {
modal.classList.add('active');
}, 10);
document.body.style.overflow = 'hidden';
}

function closeModal(modal) {
modal.classList.remove('active');
setTimeout(() => {
modal.style.display = 'none';
document.body.style.overflow = '';
}, 300);
}

// Закрытие при нажатии клавиши Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const openModals = document.querySelectorAll('.modal[style*="display: block"]');
openModals.forEach(modal => {
closeModal(modal);
});
}
});
});

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

<div id="modal1" class="modal">...</div>
<div id="modal2" class="modal">...</div>

/* Базовые стили для модального окна остаются без изменений */

/* Медиа-запрос для мобильных устройств */
@media screen and (max-width: 768px) {
.modal-content {
width: 95%;
max-width: 100%;
margin: 0 auto;
padding: 20px 15px;
border-radius: 8px 8px 0 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%);
max-height: 90vh;
overflow-y: auto;
}

.modal.active .modal-content {
transform: translateY(0);
}

/* Увеличиваем размер кнопки закрытия для удобства нажатия на мобильных */
.close-button {
font-size: 32px;
padding: 10px;
}

/* Стили для кнопок внутри модального окна */
.modal-button {
width: 100%;
padding: 15px;
margin-top: 20px;
}

/* Если в модальном окне есть форма ввода */
.modal input, 
.modal textarea, 
.modal select {
font-size: 16px; /* Предотвращает масштабирование на iOS */
padding: 12px;
margin-bottom: 15px;
}
}

// Добавьте этот код к существующему JavaScript
if ('ontouchstart' in window) {
// Поддержка свайпа вниз для закрытия модального окна на мобильных устройствах
const modalContent = document.querySelector('.modal-content');
let touchStartY = 0;
let touchMoveY = 0;

modalContent.addEventListener('touchstart', function(e) {
touchStartY = e.touches[0].clientY;
});

modalContent.addEventListener('touchmove', function(e) {
touchMoveY = e.touches[0].clientY;
const translateY = touchMoveY – touchStartY;

// Позволяем свайпать только вниз
if (translateY > 0) {
modalContent.style.transform = `translateY(${translateY}px)`;
e.preventDefault(); // Предотвращаем скролл страницы
}
});

modalContent.addEventListener('touchend', function() {
const translateY = touchMoveY – touchStartY;

// Если пользователь свайпнул достаточно далеко вниз, закрываем модальное окно
if (translateY > 100) {
closeModal();
} else {
// Иначе возвращаем на место с анимацией
modalContent.style.transition = 'transform 0.3s ease-out';
modalContent.style.transform = '';

// Убираем временные стили после завершения анимации
setTimeout(() => {
modalContent.style.transition = '';
}, 300);
}
});
}

<!-- HTML-структура -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#feedbackModal">
Оставить отзыв
</button>

<div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="feedbackModalLabel">Форма обратной связи</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="name" class="form-label">Ваше имя</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Сообщение</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
<button type="button" class="btn btn-primary">Отправить</button>
</div>
</div>
</div>
</div>

<!-- Подключение скриптов -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- HTML-структура -->
<button id="openFeedbackModal" class="button">Оставить отзыв</button>

<div id="feedbackModal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content">
<span class="close-button">&times;</span>
<h2>Форма обратной связи</h2>
<form id="feedbackForm">
<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>
<div class="form-group">
<label for="message">Сообщение</label>
<textarea id="message" rows="3" required></textarea>
</div>
<div class="form-buttons">
<button type="button" class="button secondary close-modal">Закрыть</button>
<button type="submit" class="button primary">Отправить</button>
</div>
</form>
</div>
</div>

<!-- Здесь вставляем наш собственный CSS и JavaScript код из предыдущих разделов -->