Не получается закрыть 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