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

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

.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>

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

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

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