Чтобы не разбирать простыню кода без дебага, могу просто скопировать ответ от ChatGPT
Добавь отдельный обработчик клика по оверлею, и в нём закрой все активные модалки + сам оверлей.
Вот пример, как можно это реализовать:
// Клик по оверлею — закрываем все модалки
if (overlay) {
overlay.addEventListener('click', function () {
for (let i = 0; i < modalparent.length; i++) {
modalparent[i].classList.remove('active');
}
html.classList.remove('sidebar-mobile-open');
overlay.classList.remove('active');
});
}
И вот это можно вообще убрать:
window.onclick = function(event) {
if (event.target === modalparent[event.target.getAttribute('data-index')]) {
modalparent[event.target.getAttribute('data-index')].classList.remove('active');
}
};
Оно криво отрабатывает и не нужно, если модалка не должна закрываться при клике на её контент. Если хочешь, чтобы по клику в пустую область модалки она закрывалась, это тоже можно аккуратно сделать, но не так.
Если хочешь, чтобы модалка закрывалась по клику вне её содержимого, то добавь в modalparent[i] внутреннюю обёртку (например, modal-content) и сделай так:
for (let i = 0; i < modalparent.length; i++) {
modalparent[i].addEventListener('click', function(e) {
if (!e.target.closest('.modal-content')) {
modalparent[i].classList.remove('active');
html.classList.remove('sidebar-mobile-open');
overlay.classList.remove('active');
}
});
}
