Модальное окно закрывается при нажатии на него ⇐ CSS

[Гость]

При нажатии на модальное окно (контейнер-выбор-номер-телефон-заголовок) оно закрывается, как решить эту проблему? Необходимо, чтобы модальное окно не закрывалось при нажатии на него, а закрывалось только при нажатии за его пределами.

Код: HTML:

CSS:

/* МОДАЛЬНОЕ ОКНО ВЫБЕРИТЕ НОМЕР ТЕЛЕФОНА */ .background-header { видимость: скрыта; положение: фиксированное; высота: 100%; ширина: 100%; цвет фона: rgba(0, 0, 0, 0.0); непрозрачность: 0; переход: непрозрачность 0,5 с, легкость; } .loaded-background-header { видимость: видимая; цвет фона: rgba(0, 0, 0, 0,7); непрозрачность: 1; } .container-choose-number-phone-header { непрозрачность: 0; видимость: скрыта; ширина: 500 пикселей; высота: 135 пикселей; цвет фона: #333333; радиус границы: 10 пикселей; позиция: абсолютная; верх: 100 пикселей; справа: 350 пикселей; трансформировать: транслироватьY(-30%); переход: легкость 300 мс; } .show-modal-window-choose-number-phone { видимость: видимая; трансформировать: транслироватьY(0); переход: легкость 300 мс; непрозрачность: 1; } .choose-number-phone-header { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; разрыв: 8 пикселей; ширина: 100%; высота: 100%; } .номер-телефон-модальное-окно { размер шрифта: 18 пикселей; белый цвет; семейство шрифтов: без засечек; курсор: указатель; } /* АДАПТАЦИЯ КОНТЕЙНЕРНОГО ТЕЛЕФОНА */ .container-menu-header-number-phone { дисплей: гибкий; ширина: 105 пикселей; цвет фона: #c8b197; высота: 50 пикселей; левая граница: 1 пиксель серого цвета; border-top: 1 пиксель серый сплошной; нижняя граница: 1 пиксель серого цвета; курсор: указатель; } .svg-icon-header-phone { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; высота: 100%; ширина: 100%; } JS: Собственно вот сам проблемный код, который почему-то не работает

constContainerChooseNumberPhoneHeaderEl = document.querySelector('.container-choose-number-phone-header'); const backgroundHeaderEl = document.querySelector('.background-header'); document.addEventListener('click', (event) => { const popup = event.target.closest('.container-menu-header-number-phone'); // console.log(всплывающее окно) если (всплывающее окно) { ContainerChooseNumberPhoneHeaderEl.classList.toggle('show-modal-window-choose-number-phone'); backgroundHeaderEl.classList.add('загруженный-фоновый-заголовок'); } else if (!popup &&ContainerChooseNumberPhoneHeaderEl.classList.contains('show-modal-window-choose-number-phone')) { ContainerChooseNumberPhoneHeaderEl.classList.remove('show-modal-window-choose-number-phone'); backgroundHeaderEl.classList.remove('загруженный-фоновый-заголовок'); } }); На самом деле вроде правильно написано, но не понятно в чём ошибка, почему не работает? Если вам нужен дополнительный код, готов предоставить ссылку на проект GitHub