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

Question

[Smeecy Smeecy]

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

document.addEventListener('click', Modal)

function Modal(e) {
    if (e.target.classList.contains('button_openModal')) {
        let modal = document.getElementById(e.target.dataset.open)
        modal.classList.add('modal_show')

        const modalContent = modal.querySelector('.modal__content')
        if ( (modal.classList.contains('modal_show')) && (e.target != modalContent) ) {
            modal.classList.remove('modal_show')
        }
    }
}

Answer 1

[Александр]

Для начала можно так. Либо смотреть вёрстку окна и изменять логику иначе.

- modal.classList.add('modal_show')

const modalContent = modal.querySelector('.modal__content')
if ( (modal.classList.contains('modal_show')) && (e.target != modalContent) ) {
    modal.classList.remove('modal_show')
+ } else {
+     modal.classList.add('modal_show')
+ }

Comments

[Smeecy Smeecy]

Ну хорошо, да окно начало открываться без проблем, но условия if не отрабатывают.

Вёрстка(PUG):

.modal(id= id)
        .modal__container
            .modal__inner
                .modal__leave
                    button(type="button").button_closeModal
                        svg.icon_cross
                            use(xlink:href="img/sprites/sprite.svg#icon_cross")
                .modal__content= content

[Smeecy Smeecy]

Александр нет вариантов никаких?)

[Александр]

Smeecy Smeecy,

document.addEventListener('click', (event) => {
    const openModalButton = event.target.closest('.button_openModal');
    if (openModalButton) {
        document.getElementById(openModalButton.dataset.open)?.classList.add('modal_show');
    }

    const modal = event.target.closest('.modal');
    if (modal && (!event.target.closest('.modal__inner') || event.target.closest('.button_closeModal'))) {
        modal.classList.remove('modal_show');
    }
});

[Smeecy Smeecy]

Александр, Спасибо, работает, теперь буду разбираться с кодом)

Answer 2

[Rsa97]

const modalWindow = () => {
  if (e.target.classList.contains('button_openModal')) {
    document.getElementById(e.target.dataset.open)?.classList.add('modal_show');
    return;
  }
  if (e.target.classList.contains('button_closeModal')
    || e.target.closest('.modal_show') === null) {
    document.querySelector('.modal_show')?.classList.remove('modal_show');
  }
};