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

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

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