Как можно закрыть Pop up окно при клике?

Question

NebulaDrifter

javascript

Как можно закрыть Pop up окно при клике?

Как я могу настроить скрипт, чтобы по первому клику открывалось всплывающее окно, которое сразу же сворачивается, по аналогии с функционалом на сайте https://kinozal.tv?

28 января 2024 г. 8:19

Ответы на вопрос 1

Похожие вопросы

Answer 1

Чтобы создать скрипт для управления всплывающим окном (pop-up), которое открывается при первом клике и затем закрывается, можно использовать JavaScript. Ниже приведен общий подход к реализации такого скрипта.

Сначала нам нужно создать HTML разметку для всплывающего окна и кнопки, которая будет его вызывать:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<style>
  /* Стили для всплывающего окна */
  .popup {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #000;
    background-color: #fff;
    padding: 20px;
    z-index: 1000;
  }

  /* Стили для затемнения фона */
  .overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
  }
</style>
</head>
<body>
<button id="openPopup">Открыть окно</button>

<div class="overlay" id="overlay"></div>

<div class="popup" id="popup">
  <p>Всплывающее окно</p>
  <button id="closePopup">Закрыть окно</button>
</div>

<script>
// JavaScript скрипт
</script>
</body>
</html>
```

Теперь добавим JavaScript для обработки событий клика:

```html
<script>
// Получаем элементы со страницы
const openButton = document.getElementById('openPopup');
const closeButton = document.getElementById('closePopup');
const popup = document.getElementById('popup');
const overlay = document.getElementById('overlay');

// Функция для открытия окна
function openPopup() {
  popup.style.display = 'block';
  overlay.style.display = 'block';

  // Закрываем окно с задержкой
  setTimeout(() => {
    popup.style.display = 'none';
    overlay.style.display = 'none';
  }, 1000); // Здесь 1000 - это время в миллисекундах (1 секунда)
}

// Функция для закрытия окна
function closePopup() {
  popup.style.display = 'none';
  overlay.style.display = 'none';
}

// Обработчики событий
openButton.addEventListener('click', openPopup);
closeButton.addEventListener('click', closePopup);
overlay.addEventListener('click', closePopup); // Закрыть окно при клике на затемнение
</script>
```

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

Также, если нужно, чтобы всплывающее окно показывалось только один раз при первом клике и не открывалось повторно, можно добавить дополнительный флаг, который будет контролировать это поведение:

```javascript
let isPopupOpened = false;

function openPopup() {
  if (isPopupOpened) return;
  isPopupOpened = true;
  
  popup.style.display = 'block';
  overlay.style.display = 'block';

  // Закрываем окно с задержкой
  setTimeout(() => {
    popup.style.display = 'none';
    overlay.style.display = 'none';
  }, 1000); // Здесь 1000 - это время в миллисекундах (1 секунда)
}
```

Теперь, даже если пользователь будет пытаться открыть попап заново, это не произойдет, так как переменная `isPopupOpened` будет установлена в `true` после первого открыти