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

Question

Aleksey · Accepted Answer

Для создания всплывающего окна на странице вам понадобится HTML, CSS и JavaScript:

HTML:

<button id="openModal">Нажми меня!</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <button class="close">close</button>
    <p>Привет, я всплывающее окно!</p>
  </div>
</div>

CSS:

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  /* some rules */
}

.close {
  /* some rules */
}

JavaScript:

const modal = document.querySelector('#modal');
const btn = document.querySelector('#openModal');
const close = document.querySelector('.close');

btn.onclick = function () {
  modal.style.display = 'block';
};

close.onclick = function () {
  modal.style.display = 'none';
};

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = 'none';
  }
};

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

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

Ответы

Каталог