Как сделать popup css

Создание popup (всплывающего окна) в CSS включает в себя несколько шагов. Вот простая реализация на чистом CSS:

1. Создайте HTML-разметку и отметьте всплывающее окно значком в верхнем правом углу основного контента:

<div class="container">
  <h2>Основной контент</h2>
  <div class="popup">
    <span class="close">x</span>
    <p>Текст всплывающего окна</p>
  </div>
</div>

Здесь мы создали div-контейнер с двумя дочерними элементами: h2 для основного контента и div.popup для всплывающего окна, а также добавили значок закрытия в соответствующий span-элемент.

2. Примените стили для контейнера и всплывающего окна:

.container {
  position: relative;
}
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  display: none;
}
.popup p {
  margin: 0;
}

Здесь мы устанавливаем позиционирование контейнера как относительное, чтобы позиционировать всплывающее окно относительно него. Затем мы задаем положение с помощью свойств top и left, используя значение 50% и свойство transform: translate для выравнивания всплывающего окна по центру экрана.

Для внешнего вида всплывающего окна мы задаем фоновый цвет, отступы на области заполнения, радиус скругления углов и тени. Мы также задаем свойство display: none для скрытия всплывающего окна по умолчанию.

3. Добавьте стили для отображения всплывающего окна при нажатии на значок закрытия:

.popup:target {
  display: block;
}
.popup .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  cursor: pointer;
}

Здесь мы используем псевдокласс :target, который позволяет ссылаться на элемент с определенным идентификатором в URL-адресе. Когда пользователь нажимает на значок закрытия, URL-адрес страницы изменяется на #popup, что позволяет использовать :target для отображения всплывающего окна. Мы также задаем положение и стиль для значка закрытия.

Это только одна из возможных реализаций всплывающего окна с помощью CSS, но она может быть дополнена и настроена в зависимости от требований дизайна и функциональности.