我的应用程序中有一个弹出窗口:
<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;
}
它一次就可以正常工作(我可以打开和关闭弹出窗口,但是当我第二次尝试打开它时却没有。为什么会发生这种情况以及如何解决它?
最佳答案
添加新类后,您必须从元素的类列表中删除之前的类。因此,在同时拥有两个类(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')
}
}
关于javascript - 如何使用 javascript 和 css 多次更改 div 的可见性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74321873/