Всплывающие окна, или pop-up, – это небольшие диалоговые окна, которые появляются поверх основного содержимого страницы. Они могут использоваться для различных целей, таких как отображение уведомлений, предложение подписки на рассылку или предоставление дополнительной информации. В этой статье мы рассмотрим, как создать всплывающие окна с использованием HTML, CSS и JavaScript.
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
HTML
Для начала нам нужно создать базовую разметку для всплывающего окна. Сначала создадим контейнер, который будет затемнять фон страницы и содержать само всплывающее окно:
<div id="popup-overlay">
<div id="popup">
<!-- Содержимое всплывающего окна -->
</div>
</div>
CSS
Теперь добавим стили для затемнения фона и отображения всплывающего окна:
#popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
По умолчанию контейнер с всплывающим окном скрыт с помощью display: none;. Мы изменим это свойство на display: block;, когда захотим показать всплывающее окно.
JavaScript
Чтобы показать и скрыть всплывающее окно, добавим следующий код JavaScript:
const popupOverlay = document.getElementById("popup-overlay");
const popup = document.getElementById("popup");
function showPopup() {
popupOverlay.style.display = "block";
}
function hidePopup() {
popupOverlay.style.display = "none";
}
popupOverlay.addEventListener("click", hidePopup);
popup.addEventListener("click", (event) => event.stopPropagation());
Функция showPopup делает всплывающее окно видимым, а функция hidePopup – скрывает его. Мы также добавили обработчик событий, чтобы при клике на затемненный фон всплывающее окно закрывалось.
На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.
Пример использования
Теперь, когда у нас есть код для работы с всплывающими окнами, давайте добавим кнопку на страницу, чтобы открыть окно, и добавим содержимое внутрь всплывающего окна:
<button onclick="showPopup()">Открыть всплывающее окно</button>
<div id="popup-overlay">
<div id="popup">
<h3>Пример всплывающего окна</h3>
<p>Это пример всплывающего окна с использованием HTML, CSS и JavaScript. 😊</p>
<button onclick="hidePopup()">Закрыть окно</button>
</div>
</div>
Теперь, когда пользователь нажимает на кнопку «Открыть всплывающее окно», появляется всплывающее окно, а при нажатии на кнопку «Закрыть окно» или вне всплывающего окна, оно закрывается.
Вот так просто можно создать всплывающие окна на сайте. Надеюсь, этот материал помог вам разобраться в теме! 😃
Добавить комментарий