javascript - 如何使用 javascript 和 css 多次更改 div 的可见性？

Question

我的应用程序中有一个弹出窗口:

<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;
    }

它一次就可以正常工作(我可以打开和关闭弹出窗口，但是当我第二次尝试打开它时却没有。为什么会发生这种情况以及如何解决它？

Answer 1

添加新类后，您必须从元素的类列表中删除之前的类。因此，在同时拥有两个类(class)后，模态似乎不再起作用。

例如

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')
 } 
}