Как создать всплывающие окна (pop-up) на сайте

Всплывающие окна, или 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>

Теперь, когда пользователь нажимает на кнопку «Открыть всплывающее окно», появляется всплывающее окно, а при нажатии на кнопку «Закрыть окно» или вне всплывающего окна, оно закрывается.

Вот так просто можно создать всплывающие окна на сайте. Надеюсь, этот материал помог вам разобраться в теме! 😃

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее