Не получается закрыть popup окно

Не получается закрыть popup окно. Событие срабатывает, но окно не закрывается и ошибок не появляется. Не могу понять в чём проблема

const videoSlides = document.querySelectorAll('.video-slide'); // Все слайды видео
const videoSliderPages = document.querySelectorAll('.video-slider__page');
const popups = document.querySelectorAll('.popup'); // Все попапы с iframe
const prevBtn = document.querySelector('.prev-btn'); // Кнопка "Назад"
const nextBtn = document.querySelector('.next-btn'); // Кнопка "Вперед"

// Состояние
let currentSlide = 0; // Текущий слайд
let currentPage = 0; // Текущая страница
let popupIsTrue = false; // Флаг, показывающий, открыт ли попап

// Функции
function showVideo(index) {
  popups.forEach((popup, i) => {
    if (i === index) {
      popup.style.display = 'flex';
      popupIsTrue = true;
      prevBtn.style.display = "none";
      nextBtn.style.display = "none";
    } else {
      popup.style.display = 'none';
    }
  });
}

function closePopup() {
  popups.forEach((popup) => {
    popup.style.display = 'none';
  });
  popupIsTrue = false;
  prevBtn.style.display = "block";
  nextBtn.style.display = "block";
}

function showPage(index) {
  videoSliderPages.forEach((page, pageIndex) => { // Перебираем все страницы
    if (pageIndex === index) { // Если индекс страницы совпадает с текущей страницей
      page.style.display = 'flex'; // Показывает страницу
    } else {
      page.style.display = 'none'; // Скрываем страницу
    }
  });
  currentSlide = 0; // Сбрасываем текущий слайд на 0
}

// Обработчики событий
videoSlides.forEach((slide, index) => { // Перебираем все слайды
  slide.addEventListener('click', () => { // При нажатии на слайд
    currentSlide = index; // Устанавливаем текущий слайд на индекс слайда
    showVideo(currentSlide); // Показывает видео
  });
});


nextBtn.addEventListener('click', () => {
  if (!popupIsTrue) {
    currentPage = (currentPage + 1) % videoSliderPages.length;
    showPage(currentPage);
  }
});

prevBtn.addEventListener('click', () => {
  if (!popupIsTrue) {
    currentPage = (currentPage - 1 + videoSliderPages.length) % videoSliderPages.length;
    showPage(currentPage);
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closePopup();
  }
});

const closes = document.querySelectorAll('.close'); // Все элементы для закрытия попапов

// Обработчик события для закрытия всплывающего окна при нажатии на элемент с классом .close
closes.forEach((closeElement) => {
  closeElement.addEventListener('click', () => {
    closePopup();
    console.log('clicked')
  });
});
<div class="video-slider__page">
  <div class="video-slide">
    <img src="video1" alt="Video 1" />
    <!-- Сюда можно вставить ссылку на изображение превью видео -->
    <h3>Video 1 Title</h3>
    <!-- Сюда можно вставить заголовок видео -->
    <p>Description of Video 1</p>
    <!-- Сюда можно вставить описание видео -->
    <div class="popup">
      <div class="close"><i class="fas fa-times"></i></div>
      <iframe src="video1.mp4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="video-slide">
    <img src="video2.jpg" alt="Video 2" />
    <!-- Сюда можно вставить ссылку на изображение превью видео -->
    <h3>Video 2 Title</h3>
    <!-- Сюда можно вставить заголовок видео -->
    <p>Description of Video 2</p>
    <!-- Сюда можно вставить описание видео -->
    <div class="popup">
      <div class="close"><i class="fas fa-times"></i></div>
      <iframe src="video2.mp4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="video-slide">
    <img src="video3.jpg" alt="Video 3" />
    <!-- Сюда можно вставить ссылку на изображение превью видео -->
    <h3>Video 3 Title</h3>
    <!-- Сюда можно вставить заголовок видео -->
    <p>Description of Video 3</p>
    <!-- Сюда можно вставить описание видео -->
    <div class="popup">
      <div class="close"><i class="fas fa-times"></i></div>
      <iframe src="video3.mp4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

<!-- Страница 2 -->
<div class="video-slider__page" style="display: none;">
  <div class="video-slide">
    <img src="video4" alt="Video 4" />
    <!-- Сюда можно вставить ссылку на изображение превью видео -->
    <h3>Video 4 Title</h3>
    <!-- Сюда можно вставить заголовок видео -->
    <p>Description of Video 4</p>
    <!-- Сюда можно вставить описание видео -->
    <div class="popup">
      <div class="close"><i class="fas fa-times"></i></div>
      <iframe src="video4.mp4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="video-slide">
    <img src="video5.jpg" alt="Video 5" />
    <!-- Сюда можно вставить ссылку на изображение превью видео -->
    <h3>Video 5 Title</h3>
    <!-- Сюда можно вставить заголовок видео -->
    <p>Description of Video 5</p>
    <!-- Сюда можно вставить описание видео -->
    <div class="popup">
      <div class="close"><i class="fas fa-times"></i></div>
      <iframe src="video5.mp4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
  <div class="video-slide">
    <img src="video6.jpg" alt="Video 6" />
    <!-- Сюда можно вставить ссылку на изображение превью видео -->
    <h3>Video 6 Title</h3>
    <!-- Сюда можно вставить заголовок видео -->
    <p>Description of Video 6</p>
    <!-- Сюда можно вставить описание видео -->
    <div class="popup">
      <div class="close"><i class="fas fa-times"></i></div>
      <iframe src="video6.mp4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

<button class="prev-btn"><i class="fas fa-angle-left"></i></button>
<button class="next-btn"><i class="fas fa-angle-right"></i></button>
</div>

Самое интересное, что окно закрывается при нажатии на esc


Ответы (0 шт):