好吧,我想做的是用 CSS 创建类似于模态窗口的东西。当用户禁用 JS 时,我正在创建一些奇特的东西,所以我可以用 noscript 标签显示它。
我有这样的东西:
<div id="ns-overlay">
<section>
<h1>¿Some title?</h1>
<h3>Subtitle</h3>
<p>
Content
</p>
</section>
</div>
和这个 CSS:
#ns-overlay{
width: 100%;
height: 100%;
background: rgba(52, 52, 52, 0.5);
position: fixed;
z-index: 10000;
background-image: url('../imgs/ns-overlay.png');
padding-top: 95px;
}
#ns-overlay section{
color: #FFF;
width: 990px;
margin: auto;
background: rgba(52, 52, 52, 0.9);
padding: 10px;
box-sizing: border-box;
}
#ns-overlay section h1,
#ns-overlay section h3,
#ns-overlay section p{
padding: 5px;
background: #126D4F;
/*background: linear-gradient(135deg, rgb(11, 104, 73) 0%, rgb(11, 78, 130) 100%);*/
margin: 5px;
}
#ns-overlay section h1{
width: 560px;
background: #126D4F;
}
#ns-overlay section h3{
width: 510px;
background: #0B4F82;
}
#ns-overlay section p{
background: none;
}
我真正想要做的是让覆盖层在用户点击它时消失。
最佳答案
您可以使用 :target 伪元素实现所需的效果。将 div 更改为 anchor 并引用 ID:
<a href="#ns-overlay" id="ns-overlay">
<section>
<h1>Some title</h1>
<h3>subtitle.</h3>
<p>Content</p>
</section>
</a>
然后将#ns-overlay 设置为 display:none on target:
#ns-overlay:target {
display:none;
}
关于css - 模态窗口效果与CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19417079/