Как сворачивать Pop up окно при клике?

Сворачивание Pop-up окна при клике является достаточно распространенным поведением веб-приложений. В JavaScript есть несколько способов реализовать это.

Первый способ - использование CSS и JavaScript. Сначала вам нужно создать HTML элемент для Pop-up окна, а затем стилизовать его с помощью CSS. Например:

<div id="popup">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Текст сообщения</p>
    <button id="closeBtn">Закрыть</button>
  </div>
</div>

Затем можно добавить CSS стили для этого Pop-up окна:

#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;  /* начальное состояние - скрыто */
  z-index: 9999;
}

#popup .content {
  background-color: #fff;
  width: 300px;
  height: 200px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

Далее, напишите JavaScript код для сворачивания Pop-up окна при клике на кнопку "Закрыть":

var popup = document.getElementById("popup");
var closeBtn = document.getElementById("closeBtn");

closeBtn.addEventListener("click", function() {
  popup.style.display = "none";  /* измените стиль на "none" для сворачивания */
});

При клике на кнопку "Закрыть", событие click вызывает функцию, которая изменяет стиль display Pop-up окна на "none", чтобы его свернуть и скрыть.

Второй способ - использование библиотеки jQuery. Если вы используете jQuery, то это может быть более простым решением. Вот пример:

<div id="popup">
  <div class="content">
    <h1>Заголовок</h1>
    <p>Текст сообщения</p>
    <button id="closeBtn">Закрыть</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("#closeBtn").click(function() {
    $("#popup").hide();  /* используйте функцию hide() для сворачивания Pop-up окна */
  });
</script>

Здесь мы используем функцию hide() jQuery для сворачивания Pop-up окна при клике на кнопку "Закрыть".

Оба способа эффективно сворачивают Pop-up окно при клике. Выбор между ними зависит от ваших предпочтений и привычек в использовании CSS и JavaScript.