如何在css中切换HTML div的可见性以进行覆盖

我对使用JS和CSS的div覆盖系统有一个问题。实际上，我希望只要点击一个按钮，div就会被触发，并且希望在div中有一个退出按钮，这样按下它，div就会像最初一样不可见。我在这里使用JS切换样式，但第一次效果很好，但第二次似乎无法使div可见。 这是密码

CSS:

下面是我用来让它可见的JS代码，但它只工作一次

<button onClick="document.getElementById('overlay').style.display='block';" style="color:red;">Notify me when you get online</button><p>

上网时通知我

这又让它变成了瓦穆斯

<button onClick="document.getElementById('overlay').style.visibility='hidden';" style="background:black; color:white; border-radius:0px;">[ X ]</button>

[X]

这导致

显示相反：块不
可见性：隐藏

但
显示：无

因此，在JS中类似于
…display=“none”




注意：不要使用内联CSS和JS。保持样式和逻辑远离模板


使用JS和CSS3的简单叠加弹出窗口示例
最简单、最有效的方法是使用
可见性
原因，而不是使用CSS3动画您的
#覆盖

这里有一个非常棒的例子，即使有多个按钮：


函数切换覆盖（）{
document.getElementById（“覆盖”）.classList.toggle（“显示”）；
}
[]forEach.call（document.queryselectoral（“.overlybtn”），函数（el）{
el.addEventListener（“单击”，切换覆盖）；
});
#覆盖{
位置：固定；
最高：50%；
左：50%；
背景：#000；
颜色：#fff；
文本对齐：居中；
填充：25px；
盒影：0.2000px rgba（0,0,0,0.7）；
过渡：0.6s；
转换：translate3d（-50%，-50%，0）标度（0.7）；
可见性：隐藏；
不透明度：0；
}
#重叠显示{
转换：translate3d（-50%，-50%，0）比例（1）；
能见度：可见；
不透明度：1；
}
#覆盖，覆盖{
光标：指针；
字号：2em；
位置：绝对位置；
顶部：-2px；
右：5px；
颜色：#fff；
}

&时代；
嗨哟！
显示
Lorem ipsum dolor sit amet，奉献精英。不动产面部的流动性，也就是暂时性的、相似真实的、理性的、可代表性的、结构主义的、具有负性的、充满活力的分子的volupatibus solutions

显示
晚安，ut！除此之外，另一个最小的化名是“实验室数量”或“实验室数量”错误，即“累积量”或“累积量”的错误。别名？
显示和可见性不是同一操作。要使代码正常工作，您需要使用其中一种。在这种情况下，
display
属性更可取，因为它会导致div从流中完全移除，而不是仅仅隐藏

要修复代码，请更改以下内容：

onClick="document.getElementById('overlay').style.visibility='hidden';"

为此：

onClick="document.getElementById('overlay').style.display='none';"

作为参考，
visibility:hidden
的对立面是
visibility:visible
，而
display:none
的对立面是任何其他显示属性，例如
display:block
，
display:inline
，等等。
在一种情况下使用
显示
，在另一种情况下使用
可见性

有两种解决方案：

在
overlay
类中添加
可见性：隐藏，而不是
显示：无更改为
block
，并使用
document.getElementById（'overlay'）.style.visibility='visible'：

要在
[x]
按钮中隐藏
div
，只需使用
document.getElementById（'overlay'）.style.display='none'改为可见性：隐藏（更好的选项）

onClick="document.getElementById('overlay').style.display='none';"