Модальное окно СSS – популярный элемент пользовательского интерфейса, который используется для отображения контента поверх основной страницы. Они предоставляют возможность взаимодействия пользователя с дополнительной информацией, формами или другим контентом, не отвлекая его от основного контента страницы. В этой статье мы рассмотрим способы создания модального окна с использованием CSS.
Модальное окно СSS: Пример
Шаг 1: Создание разметки HTML
Сначала создадим разметку HTML для модального окна. Обычно модальное окно содержит контейнер, который содержит заголовок, содержимое и кнопку закрытия:
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<h2>Заголовок модального окна</h2>
<p>Содержимое модального окна</p>
</div>
</div>Шаг 2: Стилизуем модальное окно СSS
Далее приступим к стилизации модального окна с использованием CSS. Установим начальные стили и определим, как модальное окно должно отображаться на странице:
/* Скрыть модальное окно по умолчанию */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
/* Стилизация содержимого модального окна */
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* Стилизация кнопки закрытия */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}Шаг 3: Добавление интерактивности с JavaScript
Для отображения и скрытия модального окна мы можем использовать JavaScript. Например, мы можем использовать JavaScript для добавления класса “show” к модальному окну, когда пользователь нажимает на кнопку или ссылку, открывающую модальное окно. Затем, по клику на кнопку закрытия, мы можем удалить класс “show” для скрытия модального окна:
// Получаем элементы модального окна и кнопку закрытия
const modal = document.querySelector('.modal');
const closeButton = document.querySelector('.close');
// Открываем модальное окно
const openModal = () => {
modal.classList.add('show');
}
// Закрываем модальное окно
const closeModal = () =>{
modal.classList.remove('show');
}
// Добавляем обработчики событий для открытия и закрытия модального окна
openButton.addEventListener('click', openModal);
closeButton.addEventListener('click', closeModal);Шаг 4: Использование модального окна на странице
Теперь, когда у нас есть разметка HTML, стили CSS и функциональность JavaScript, мы можем использовать модальное окно на странице. Добавим кнопку или ссылку, которая будет открывать модальное окно:
<button class="open-button">Открыть модальное окно</button>const openButton = document.querySelector('.open-button');
openButton.addEventListener('click', openModal);Итоговый JavaScript код выглядит так:
document.addEventListener('DOMContentLoaded', ()=> {
const modal = document.querySelector('.modal');
const closeButton = document.querySelector('.close');
const openButton = document.querySelector('.open-button');
const openModal = () => {
modal.style.display = 'block';
}
const closeModal = () => {
modal.style.display = 'none';
}
openButton.addEventListener('click', openModal);
closeButton.addEventListener('click', closeModal);
});Теперь, при нажатии на кнопку “Открыть модальное окно”, модальное окно должно открыться, и при нажатии на кнопку закрытия оно должно закрыться.
Заключение
Модальное окно с использованием CSS и JavaScript позволяет добавить интерактивность и стиль к вашей веб-странице. Вы можете настраивать стили модального окна и добавлять дополнительную функциональность с помощью JavaScript, чтобы оно соответствовало потребностям вашего проекта. Используйте эти сведения для создания эффективных и привлекательных модальных окон на своих веб-страницах.
