02 Июн 2023
2 мин
2770

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

Узнайте, как создать всплывающие окна (pop-up) на вашем сайте с помощью HTML, CSS и JavaScript в этой практической статье для новичков!

Содержание

Всплывающие окна, или pop-up, – это небольшие диалоговые окна, которые появляются поверх основного содержимого страницы. Они могут использоваться для различных целей, таких как отображение уведомлений, предложение подписки на рассылку или предоставление дополнительной информации. В этой статье мы рассмотрим, как создать всплывающие окна с использованием HTML, CSS и JavaScript.

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) =&gt; event.stopPropagation());

Функция showPopup делает всплывающее окно видимым, а функция hidePopup – скрывает его. Мы также добавили обработчик событий, чтобы при клике на затемненный фон всплывающее окно закрывалось.

Пример использования

Теперь, когда у нас есть код для работы с всплывающими окнами, давайте добавим кнопку на страницу, чтобы открыть окно, и добавим содержимое внутрь всплывающего окна:

<button onclick="showPopup()">Открыть всплывающее окно</button>

<div id="popup-overlay">
  <div id="popup">
    <h3>Пример всплывающего окна</h3>
    <p>Это пример всплывающего окна с использованием HTML, CSS и JavaScript. 😊</p>
    <button onclick="hidePopup()">Закрыть окно</button>
  </div>
</div>

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

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

Содержание

Добавить комментарий

Пройти тест на профессию