Как сделать всплывающее окно в html

Для создания всплывающего окна в HTML можно использовать тег <div> и стили CSS.

• Сначала создадим блок <div>, который будет содержать всплывающее окно:

<div class="popup">
  <!-- Содержимое всплывающего окна -->
</div>

• Добавим стили для этого блока. С помощью CSS зададим ему размеры, позицию, цвет фона и прозрачность:

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #000;
  opacity: 1;
  z-index: 9999;
}

• Добавим кнопку, при нажатии на которую будет открываться всплывающее окно:

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

• Создадим функцию openPopup(), которая будет открывать всплывающее окно. В этой функции мы будем получать доступ к блоку <div> и задавать ему свойство display: block;, чтобы он стал видимым:

function openPopup() {
  var popup = document.querySelector('.popup');
  popup.style.display = 'block';
}

• Для того чтобы закрыть всплывающее окно, добавим кнопку "закрыть" и функцию closePopup(), которая будет скрывать блок <div>:

<div class="popup">
  <button onclick="closePopup()">Закрыть</button>
  <!-- Содержимое всплывающего окна -->
</div>

Всплывающее окно проще всего сделать тегом <dialog>. Браузер сам рисует затемнение, закрывает окно по Esc и держит фокус внутри:

<button type="button" id="open">Записаться</button>

<dialog id="modal">
  <h2>Запись на вебинар</h2>
  <p>Оставьте email, и мы пришлём ссылку.</p>
  <form method="dialog">
    <button>Закрыть</button>
  </form>
</dialog>

<script>
  const modal = document.getElementById('modal');
  document.getElementById('open').addEventListener('click', () => {
    modal.showModal();
  });
</script>

showModal() открывает окно поверх страницы. Кнопка внутри <form method="dialog"> закрывает его без JavaScript.

Оформление

dialog {
  border: none;
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

::backdrop — фон под окном.

Закрытие по клику на фон

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close();
  }
});

Чтобы клик по самому окну не закрывал его, обёрните содержимое в <div> с отступами, а padding у dialog уберите.

Всплывающая подсказка

Для маленькой подсказки рядом с элементом подойдёт атрибут popover:

<button popovertarget="hint">?</button>
<div id="hint" popover>Пароль — от 8 символов</div>

Окно откроется по клику без JavaScript и закроется по клику вне его.

Без <dialog>: div и CSS

Если нужно поддерживать очень старые браузеры, окно делают из div с position: fixed на весь экран и переключают класс. Тогда закрытие по Esc и удержание фокуса придётся писать самому.

Окно браузера alert

alert('Сохранено') и confirm('Удалить?') показывают системное окно. Его нельзя оформить, и оно блокирует страницу. Подходит для отладки, в интерфейсе используйте <dialog>.

Формы и интерактивные элементы разбирают в бесплатном курсе «Введение в HTML и CSS».