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 示例

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

Answer 1

您也许可以使用 :target 伪元素来实现所需的效果。将 div 更改为锚点并引用 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 在目标上：

#ns-overlay:target {
  display:none;
}

JSFiddle 示例

Answer 2

如果我了解您打算做什么，我的回答是 css 不适用于此类事件。要使用 click 事件，您需要使用 javascript。