HTML:
Код
<button class="open-modal">Открыть окно</button>
<div class="modal-overlay"></div>
<div class="modal">
<div class="modal-content">
<span class="close-modal">×</span>
<h2>Мое модальное окно</h2>
<p>Здесь можно разместить любой контент.</p>
</div>
</div>
<div class="modal-overlay"></div>
<div class="modal">
<div class="modal-content">
<span class="close-modal">×</span>
<h2>Мое модальное окно</h2>
<p>Здесь можно разместить любой контент.</p>
</div>
</div>
CSS:
Код
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
}
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
z-index: 1001;
}
JavaScript (jQuery):
Код
$(document).ready(function() {
$('.open-modal').click(function(e) {
e.preventDefault();
$('.modal-overlay, .modal').fadeIn();
});
$('.modal-overlay, .close-modal').click(function() {
$('.modal-overlay, .modal').fadeOut();
});
});
$('.open-modal').click(function(e) {
e.preventDefault();
$('.modal-overlay, .modal').fadeIn();
});
$('.modal-overlay, .close-modal').click(function() {
$('.modal-overlay, .modal').fadeOut();
});
});
Как это работает:
HTML: Создаем кнопку для открытия, затемненную подложку и само модальное окно.
CSS: Стилями скрываем элементы до клика, позиционируем их и задаем внешний вид.
JavaScript:
При клике на кнопку, подложка и окно плавно появляются. При клике на подложку или крестик закрытия они скрываются.
Что можно добавить:
Анимация:
Используйте библиотеки анимации для более плавного появления и исчезновения.
Формы: Добавьте форму для сбора данных внутри модального окна.
Динамическое содержимое: Загружайте содержимое окна динамически с помощью AJAX.
Совет:
Доступность: Убедитесь, что модальное окно доступно для всех пользователей.
Мобильные устройства: Оптимизируйте стили для разных размеров экранов.
Пример с формой: Внутри modal-content добавьте:
Код
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>
Дополнительные ресурсы:
ArcticModal: Расширенный плагин для создания модальных окон: Ссылка
