css - 模态窗口效果与CSS

Question

好吧，我想做的是用 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;
}

JSFiddle example

我真正想要做的是让覆盖层在用户点击它时消失。

Answer 1

您可以使用 :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;
}

JSFiddle Example