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更改为锚并引用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

Answer 2

如果我理解你打算做什么，我的答案是css不适用于这种类型的事件。要使用click事件，您需要使用javascript。

CSS的模态窗口效果

2 个答案: