如何使用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

添加新类后，必须从元素的类列表中删除上一个类。因此，在同时拥有两个类之后，模态似乎将不再工作。

例如

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

Answer 2

如果你尝试做模态，你应该使用HTML的<dialog>元素(另请参阅HTMLDialogElement(。MDN有关于它的教程。