Как создать простое модальное окно с помощью HTML, CSS и JavaScript
Лайфхаки

Как создать простое модальное окно с помощью HTML, CSS и JavaScript

Добро пожаловать, дорогие читатели! Сегодня буквально «на бегу» расскажу, как создать простое, но эффективное модальное окно с использованием HTML, CSS и JavaScript. Поехали!

Итак, что такое модальные окна? Модальные окна — это популярный элемент веб-дизайна, который позволяет отображать всплывающее окно поверх основного контента страницы. Не претендую на оригинальность, но надеююсь, что мой подход позволит вам легко добавить модальное окно на ваш сайт и привлечь внимание к определенной информации или функциональности. Давайте начнем!

HTML:
Для начала создадим структуру нашей страницы с простыми элементами, такими как кнопка «Показать модальное окно» и контейнер для модального окна:

<!DOCTYPE html>
<html>
<head>
<title>Пример кода</title>
</head>
<body>
 
<!-- Кнопка для открытия модального окна -->
<button id="show-modal">Показать модальное окно</button>
 
<!-- Контейнер для модального окна -->
<div id="overlay" style="display:none;">
<div id="section">
<h2>Модальное окно</h2>
Содержимое модального окна...
<button id="close-btn">Закрыть</button>
</div>
</div>
 
<!-- JavaScript код будет размещен внизу страницы -->
</body>
</html>

CSS:
Добавим немного стилей для красивого отображения модального окна. Он будет скрыт (display:none) по умолчанию, а когда пользователь кликнет на кнопку «Показать модальное окно», мы будем изменять его стиль на «display:block»: 

<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none; /* Изначально скрыто */
justify-content: center;
align-items: center;
}
 
#section {
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
 
#close-btn {
margin-top: 10px;
cursor: pointer;
}
</style>

JavaScript:
Теперь добавим несколько строчек JavaScript для функциональности нашего модального окна. Мы будем использовать DOM API для получения элементов и добавления слушателей событий:

<script>
const section = document.getElementById("section");
const overlay = document.getElementById("overlay");
const showBtn = document.getElementById("show-modal");
const closeBtn = document.getElementById("close-btn");
 
showBtn.addEventListener("click", function() {
overlay.style.display = "block"; // При клике на кнопку, показываем модальное окно
});
 
closeBtn.addEventListener("click", function() {
overlay.style.display = "none"; // При клике на кнопку "Закрыть", скрываем модальное окно
});
</script>

Полный пример кода — ниже:

<!DOCTYPE html>
<html>
<head>
<title>Пример кода</title>
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
}
 
#section {
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
 
#close-btn {
margin-top: 10px;
cursor: pointer;
}
</style>
</head>
<body>
 
<!-- Кнопка для открытия модального окна -->
<button id="show-modal">Показать модальное окно</button>
 
<!-- Контейнер для модального окна -->
<div id="overlay">
<div id="section">
<h2>Модальное окно</h2>
Содержимое модального окна...
<button id="close-btn">Закрыть</button>
</div>
</div>
 
<script>
const section = document.getElementById("section");
const overlay = document.getElementById("overlay");
const showBtn = document.getElementById("show-modal");
const closeBtn = document.getElementById("close-btn");
 
showBtn.addEventListener("click", function() {
overlay.style.display = "block";
});
 
closeBtn.addEventListener("click", function() {
overlay.style.display = "none";
});
</script>
 
</body>
</html>

Сам пример — доступен по ссылке 🙂

Как всегда — в случае возникновения вопросов пишите на почту или в Telegram.