Как сделать всплывающее окно в 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>

function closePopup() {
  var popup = document.querySelector('.popup');
  popup.style.display = 'none';
}