<html>
<head>
  <meta charset="UTF-8">
  <title>Пример всплывающего окна</title>
</head>
<body>
  <button class="popup-button">Открыть окно</button>
  <div class="popup">
    <h2>Всплывающее окно</h2>
    <p>Это пример всплывающего окна.</p>
  </div>
</body>
</html>
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all.0.5s ease;
  display: none;
}
.popup.open {
  animation: open 0.3s ;
}
.popup.close {
  animation: close 0.3s ;
}
@keyframes open {
  0% {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes close {
  0% {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
}
const popup = document.querySelector('.popup');
const popupButton = document.querySelector('.popup-button');

// Обработчик клика на кнопке открытия окна
popupButton.addEventListener('click', function() {
  console.log('open!')
  popup.style.display = "block";
  popup.classList.add('open');
});

// Обработчик клика на документе
document.addEventListener('click', function(event) {
  console.log(popup.style.display);
  // Проверяем, является ли целевой элемент клика частью всплывающего окна
  if (!popup.contains(event.target) && !popupButton.contains(event.target) && popup.classList.contains('open')) {
    // Если нет, то закрываем окно
    console.log('close!')
    popup.classList.remove('open');
    popup.classList.add('close');
    setTimeout(function() {
      popup.style.display = "none";
      popup.classList.remove('close');
    }, 255);
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.