Как закрыть модальное окно c переменными кликом по оверлею?

Question

[Stanislav6]

Ребята, здравствуйте.
Прошу прощения за тупую формулировку, не знал как корректно сформулировать вопрос.

В общем суть ситуации:
Хочу завернуть выбор атрибута товара в модальное окно, которое уже есть в теме. Повесил нужные теги на обёртку в цикле, всё прекрасно.
Нарыл скрипт, который разделяет модальные окна по индексу, собрал франкенштейна, но не могу грамотно закрыть окно.

var modalparent = document.getElementsByClassName("secondary"), 
	modal_btn_multi = document.getElementsByClassName("toggle-sidebar"), 
	span_close_multi = document.getElementsByClassName("toggle-close"), 
	overlay = document.getElementById( 'woostify-overlay' );
	html = document.documentElement;

// When the user clicks the button, open the modal
function setDataIndex() {

	for (i = 0; i < modal_btn_multi.length; i++)
	{
		modal_btn_multi[i].setAttribute('data-index', i);
		modalparent[i].setAttribute('data-index', i);
		span_close_multi[i].setAttribute('data-index', i);
	}
}


for (i = 0; i < modal_btn_multi.length; i++)
{
	modal_btn_multi[i].onclick = function() {
		var ElementIndex = this.getAttribute('data-index');
		modalparent[ElementIndex].classList.add( 'active' );
		html.classList.add( 'sidebar-mobile-open' );
		
		if ( overlay ) {
			overlay.classList.add( 'active' );
		}
	};



	// When the user clicks on <span> (x), close the modal
	span_close_multi[i].onclick = function() {
		var ElementIndex = this.getAttribute('data-index');
		modalparent[ElementIndex].classList.remove( 'active' );
		html.classList.remove( 'sidebar-mobile-open' );
		overlay.classList.remove( 'active' );
		
	};
	
}


window.onload = function() {

	setDataIndex();
};

window.onclick = function(event) {
	if (event.target === modalparent[event.target.getAttribute('data-index')]) {
		modalparent[event.target.getAttribute('data-index')].classList.remove( 'active' );
	}

};

По кнопке span_close_multi всё замечательно закрывается, кликом по внутренности прячется сама модалка, но не оверлей, а кликом по оверлею вообще ничего не происходит.

Помогите посильно, пожалуйста.

Comments

[Ankhena]

Может, вам поможет тег dialog или нативный popover API?

Answer 1

[Артем Золин]

Чтобы не разбирать простыню кода без дебага, могу просто скопировать ответ от 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');
		}
	});
}

Answer 2

[Dmitry0900]

e.target возвращает нажатый элемент, а не модальное окно.
window.onclick = function(event) {
if (event.target.closest("secondary") === modalparent[...]) {
modalparent[...].classList.remove( 'active' );
}
};

Comments

[Stanislav6]

Не закрывает.

[VoidVolker]

Dmitry0900 code