Как изменить видимость div несколько раз с помощью javascript и css?

У меня есть всплывающее окно в моем приложении:

<div id="modal"></div>

let modal = document.getElementById('modal')
modal.innerHTML = `
            <button class="close-button" onclick="close_modal()">Close</button>
        `

#modal{
        width: 30em;
        height: 24em;
        overflow: hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
    }

При нажатии на определенную кнопку запускается функция, в которой есть modal.classList.add('open-modal').

.open-modal{
        visibility: visible !important;
    }

close_modal функция является:

function close_modal(){
        modal.classList.add('close-modal')
    }

CSS:

.close-modal{
        visibility: hidden !important;
    }

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

Если вы пытаетесь сделать модалы, вам следует использовать элемент HTML <dialog> (также смотрите HTMLDialogElement). В MDN есть учебник по этому вопросу.

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

for ex.

function changeVisibility(modal) {
 if(modal.classList.contains('open-modal')) {
   modal.classList.remove('open-modal');
   modal.classlist.add('close-modal');
 } else {
    modal.classList.remove('close-modal');
    modal.classList.add('open-modal')
 } 
}

Вернуться на верх