Как убрать модальное окно по той же кнопке?

Question

[Денис]

Доброго всем дня.
В кратце, есть вот такое модальное окно(меню)

function modal() {
    const mainModalBtn = document.querySelector('.burger-menu')
    const mainModalParent = document.querySelector('.head')
    

    mainModalBtn.addEventListener('click', function addModal() {
        
    const mainModal = createVirtualMainModal(`
    <section class="main-modal">
        <button class="main-modal__close">X</button>

        <div class="main-modal__block"></div>
        <div class="main-modal__block"></div>
        <div class="main-modal__block"></div>
        <div class="main-modal__block"></div>

        <nav class="main-modal__content">
            <a href="#" class="main-modal__content_link">Introduction</a>
            <a href="#" class="main-modal__content_link">About</a>
            <a href="#" class="main-modal__content_link">Workflow</a>
            <a href="#" class="main-modal__content_link">Portfolio</a>
            <a href="#" class="main-modal__content_link">Contacts</a>
        </nav>
        

    </section>
`)
    function createVirtualMainModal (str) {
        const mainModalBlock = document.createElement('section')
        mainModalBlock.innerHTML = str
        return mainModalBlock.firstElementChild
    }
    mainModalParent.appendChild(mainModal)

    let closeMainModalBtn = document.querySelector('.main-modal__close')
    let mainmModaContent = document.querySelector('.main-modal__content')
   

    function showUpAnimation () {
        closeMainModalBtn.style.opacity = '1'
        mainmModaContent.style.opacity = '1'
    }
    setTimeout(showUpAnimation,1300 )
    })


}

modal()

Задать addEventListener <button class="main-modal__close">X</button> не получается.
но я могу изначальной кнопочке задать z-index чтоб она была поверх всего, такой вариант мне тоже нравится(не знаю правда насколько такой вариант правелен) тогда нужно задать этой же изначальной кнопочке второе событие и я сомневаюсь как сделать по второму клику закрытие окна(с удалением из дерева) . Но по следующим кликам сделать обратно появление и удаление.
Возможна ли такая реализация с моим изначальным кодом?

Answer 1

[profesor08]

Задай где-то в стилях класс .is-active, который будет задавать свойства для активной модалки. Далее по нажатию кнопки проверяй, есть ли у модалки это класс, и добавляй/удаляй его. Так и будет модалка появляться/прятаться.

const button = document.querySelector(".modal-button");
...
const modal = document.querySelector(".modal");
...

button.addEventListener("click", () => {
  if (modal.classList.contains("is-active")) {
    modal.classList.remove("is-active");
  }
  else {
    modal.classList.add("is-active");
  }
});

Comments

[Ragtime Kitty]

А classList.toggle не проще будет?

[Денис]

не получается, так как эллемента изначально нет на страничке

[profesor08]

Ragtime Kitty, проще только если надо сделать лишь одно действие и от него ничего не зависит далее в коде.

Денис, ну так навешивай после того как появится кнопка. Твой же сайт, ты его контролируешь. Но если все плохо, то используй "live" события, тут по русски написано как там это работает - https://habr.com/ru/post/64029/