javascript - 如何创建仅在单击按钮时出现的黑色窗帘？

Question

我想在我的网站上创建一个黑色的窗帘，但我希望它只在有人单击此按钮时出现:

<a href="#dailyBriefOverlay" id="dailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
</a>

我在创建仅在单击时显示的效果时遇到了问题。

我创建了 div

    <div class="overlay" id="dailyBriefOverlay">
        <p>test</p>
    </div>

并设置CSS:

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
}

有什么 jquery 可以帮助解决这个问题吗？

http://qz.com/这个网站有这个效果，如果你点击消息图标，就会出现这个窗口。

非常感谢任何帮助。

Answer 1

您可以使用纯 CSS 完成此任务。使用 :target .overlay 的伪类仅在使用 URL 哈希作为目标时显示。

为此，您应该首先隐藏 .overlay，然后使用 .overlay:target 选择器来显示它。还要确保从链接中删除重复的 id="dailyBriefOverlay"。

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
    display: none;   /* hide it */
}
.overlay:target {
    display: block;  /* show it if it's a target */
}

<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
    Click
</a>

<div class="overlay" id="dailyBriefOverlay">
    <p>test</p>
</div>

使用这种纯 CSS 方法，添加一些漂亮的 CSS 过渡效果也很容易。例如下面的演示。

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
    transition: height .4s ease;
}
.overlay:target {
    height: 100%;
}

<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
    Click
</a>

<div class="overlay" id="dailyBriefOverlay">
    <p>test</p>
    <p><a href="#">Close</a></p>
</div>