Как закрыть модалку при клике извне, но чтобы обработчик был на ней?

Question

[Black_Fire]

Есть всплывающее окно фиксированной ширины и высоты. Нужно, чтобы по клику вне его, оно закрывалось, но обработчик желательно на нём самом чтобы был. То есть без дополнительной обертки, которая в таких случаях идет как фон и обычно занимает всю ширину и высоту экрана, по которой отлавливают клик.

Comments

[WapSter]

И как же ты это представляешь, если клик не в ней, но обработчик на ней.

[Black_Fire]

WapSter, если бы представлял, то наверное, вопроса бы не последовало.

[y0u]

Black_Fire, нельзя отследить клик "вне", если на эту самую область "вне" не повесить обработчик кликов. Как и написал WapSter, сам вопрос противоречит тому, что вы хотите сделать.

Можно закрыть модалку и без добавления фона, просто повесив обработчик на весь документ и в нем определять куда юзер кликнул, но это глупо, как по мне.

[iBird Rose]

Black_Fire, никак. правильное решение как раз на фон вешать. либо костыль по клику на document.
если прям очень нужен обработчик - то можешь триггер вызывать там где хочешь event

Answer 1

[Dennis]

как-то так

modal.addEventListener('click', (e) => {
        if (e.target === modal || e.target.getAttribute('data-close') == '') {
            closeModal()
        }
    })

modal - это твоя переменная с селектором модалки, data-close - это атрибут который добавляется к кнопке закрытия модалки, можно получить кнопку закрытия и другим способом. closemodal() - это функция закрытия, которая вызывается при других действиях закрытия.