Попап

<button class="pp-button" type="button" data-popup="main-popup">Открыть попап</button>

<div class="popups-overlay">
  <div id="main-popup" class="popup">
    <button class="close-popup-btn" type="button" aria-label="Закрыть окно"></button>
    <div class="popup__content">
      <div class="popup__title">Заголовок попапа</div>
      <div class="popup__subtitle">Текст под заголовком</div>
      <div class="popup__text">
        Съешь ещё этих мягких французских булок, да выпей чаю. В чащах юга жил бы цитрус? Да, но фальшивый экземпляр! Широкая электрификация южных губерний даст мощный толчок подъёму сельского хозяйства.
      </div>
    </div>
  </div>
</div>

.popups-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #f0f0f0b7;
  transition: opacity .4s linear;
  z-index: 1000;

  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.popups-overlay.show {
  pointer-events: initial;
  visibility: visible;
  opacity: 1;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
  max-width: 500px;
  width: 100%;
  padding: 40px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  max-height: 100dvh;
}

.popup__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup__title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #2e4a82;
  margin-bottom: 6px;
}

.popup__subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px;
  color: #444;
}

.popup__text {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.close-popup-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.close-popup-btn::before,
.close-popup-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: #000;
}

.close-popup-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-popup-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 500px) {
  .popup {
    padding: 24px;
    max-width: 96%;
  }

  .popup__title {
    font-size: 20px;
  }

  .popup__subtitle {
    font-size: 15px;
  }
}

.pp-button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 40px;
  background-color: #2e4a82;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  line-height: 1.1;
  transition: background-color 0.3s ease;
}

.pp-button:hover {
  background-color: #1A2C54;
}

@media (max-width: 500px) {
    .pp-button {
        font-size: 14px;
    }
}

document.addEventListener('DOMContentLoaded', () => {
  const overlay = document.querySelector('.popups-overlay');
  const openButtons = document.querySelectorAll('[data-popup]');

  openButtons.forEach((btn) => {
    const popupId = btn.getAttribute('data-popup');
    const popup = document.getElementById(popupId);

    btn.addEventListener('click', (evt) => {
      evt.preventDefault();

      if (overlay) {
        overlay.classList.add('show');
      }

      if (popup) {
        popup.classList.add('show');
      }
    });

    if (popup) {
      const closeBtn = popup.querySelector('.close-popup-btn');

      if (closeBtn) {
        closeBtn.addEventListener('click', () => {
          if (overlay) {
            overlay.classList.remove('show');
          }

          popup.classList.remove('show');
        });
      }
    }
  });

  if (overlay) {
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) {
        overlay.classList.remove('show');

        const openPopups = overlay.querySelectorAll('.popup.show');
        openPopups.forEach((popup) => {
          popup.classList.remove('show');
        });
      }
    });
  }
});