Как сделать попап css

Вы можете создать попап с помощью CSS, используя позиционирование, анимации и прозрачность для создания эффекта слоев.

HTML:

<button id="popup-btn">Открыть попап</button>

<div id="popup" class="popup">
  <div class="popup-content">
    <h2>Заголовок попапа</h2>
    <p>Текст попапа.</p>
    <button class="close-btn">Закрыть попап</button>
  </div>
</div>

CSS:

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.popup.active {
  visibility: visible;
  opacity: 1;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.close-btn:hover {
  opacity: 0.7;
}

#popup-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 5px;
  cursor: pointer;
}

#popup-btn:hover {
  background-color: #000;
  color: #fff;
}

Здесь мы создали кнопку #popup-btn для открытия попапа и использовали позиционирование, прозрачность и анимации для создания эффекта слоев. Мы также использовали transform: translate() для центрирования содержимого попапа.

Чтобы открыть и закрыть попап, вы можете использовать JavaScript:

JavaScript:

const popupBtn = document.getElementById("popup-btn");
const popup = document.getElementById("popup");
const closeBtn = document.querySelector(".close-btn");

popupBtn.addEventListener("click", function () {
  popup.classList.add("active");
});

closeBtn.addEventListener("click", function () {
  popup.classList.remove("active");
});

Здесь мы добавляем слушателей событий для кнопки и закрытия попапа, чтобы добавлять или удалять класс active, который изменяет прозрачность и позиционирование попапа.

Вы можете изменять содержимое, стили и анимации, чтобы создать свой уникальный попап на вашем сайте.