我对使用 JS 和 CSS 的 div 叠加系统有疑问。实际上,我希望在单击按钮后立即触发 div,并希望在 div 本身中有一个退出按钮,以便按下它 div 再次像最初一样不可见。我这里用JS切换样式,第一次效果不错,第二次好像div不可见了。 这是代码
CSS:
#overlay {
position: fixed;
top: 50%;
left: 50%;
width: 300px;
height: 500px;
margin-left: -150px;
margin-top: -100px;
background-color: black;
text-align: center;
opacity:0.8;
display:none;
border-radius:50px;
z-index: 10;
outline: 9999px solid rgba(0,0,0,0.7);
}
这是我用来使其可见的 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>
最佳答案
在一种情况下,您使用display
,在另一种情况下,您使用visibility
。
有两种解决方法:
在
overlay
类中添加visibility:hidden;
,将display:none;
改为block
,并显示div
使用document.getElementById('overlay').style.visibility='visible':
要在您的
[x]
按钮中隐藏您的div
只需使用document.getElementById('overlay').style.display='none ';
而不是visibility:hidden
(更好的选择)。
关于css - 如何在 css 中切换 HTML div 的可见性以进行叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32664210/