Логотип Хекслета
/
Вопросы и ответы
/
HTML
/

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

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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

0

Для создания всплывающего окна в 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';
}

3 года назад

Aleksey

Похожие вопросы