Модальное окно с размытием фона

Модальные окна - важный элемент интерфейса для отображения дополнительной информации. В данном уроке мы сделаем модальное окно с эффектом размытия фона с помощью CSS свойства backdrop-filter.

HTML структура

Создадим базовую разметку модального окна:

<button class="modal-open-btn">Open Modal</button>

<div class="modal">
	<div class="modal-content">
		<h3>Modal Title</h3>
		<p>This is modal content with blurred background effect.</p>
		<button class="modal-close-btn">Close</button>
	</div>
</div>

Базовые стили

Добавим основные стили для модального окна:

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background: white;
	padding: 30px;
	border-radius: 8px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal-open-btn {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

.modal-close-btn {
	margin-top: 20px;
	padding: 8px 16px;
	background: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

JavaScript для управления

Добавим простой JavaScript для открытия/закрытия модального окна:

const modal = document.querySelector('.modal');
const openBtn = document.querySelector('.modal-open-btn');
const closeBtn = document.querySelector('.modal-close-btn');

openBtn.addEventListener('click', () => {
	modal.style.display = 'flex';
});

closeBtn.addEventListener('click', () => {
	modal.style.display = 'none';
});

modal.addEventListener('click', (e) => {
	if (e.target === modal) {
		modal.style.display = 'none';
	}
});

Анимация появления

Добавим плавное появление модального окна:

.modal {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal.active {
	opacity: 1;
	display: flex;
}

.modal-content {
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.modal.active .modal-content {
	transform: scale(1);
}

И обновим JavaScript:

openBtn.addEventListener('click', () => {
	modal.classList.add('active');
});

closeBtn.addEventListener('click', () => {
	modal.classList.remove('active');
});

modal.addEventListener('click', (e) => {
	if (e.target === modal) {
		modal.classList.remove('active');
	}
});

Итоговый код

Полный код модального окна с размытым фоном:

<button class="modal-open-btn">Open Modal</button>

<div class="modal">
	<div class="modal-content">
		<h3>Modal Title</h3>
		<p>This is modal content with blurred background effect.</p>
		<button class="modal-close-btn">Close</button>
	</div>
</div>

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal.active {
	opacity: 1;
	display: flex;
}

.modal-content {
	background: white;
	padding: 30px;
	border-radius: 8px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	transform: scale(0.9);
	transition: transform 0.3s ease;
}

.modal.active .modal-content {
	transform: scale(1);
}

.modal-open-btn {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

.modal-close-btn {
	margin-top: 20px;
	padding: 8px 16px;
	background: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

const modal = document.querySelector('.modal');
const openBtn = document.querySelector('.modal-open-btn');
const closeBtn = document.querySelector('.modal-close-btn');

openBtn.addEventListener('click', () => {
	modal.classList.add('active');
});

closeBtn.addEventListener('click', () => {
	modal.classList.remove('active');
});

modal.addEventListener('click', (e) => {
	if (e.target === modal) {
		modal.classList.remove('active');
	}
});