html - 没有 JavaScript 多弹出窗口？

Question

使用描述的方法 here: http://www.sevensignature.com/blog/code/pure-css-popup-without-javascript

我已经能够在自己的工作站点上复制此方法。但是，当我添加其他链接时，我遇到的问题就发生了。

我有一个缩略图页面/图片库。当我点击缩略图时，我希望它有自己的弹出窗口。上述技术似乎只有在只有一个链接/弹出窗口时才有效

我可以对其进行编辑以适应多个弹出窗口吗？

Answer 1

根据您提供的示例，这是很有可能的 http://codepen.io/anon/pen/YXXdEm在 chromium v​​42 上运行良好

的 href 字段和带有类覆盖的 div 的 id 字段应该相同

<div class="box">
    <a class="button" href="#popup___2">Another pop up</a>
</div>

<div id="popup___2" class="overlay">
    <div class="popup">
        <h2>I am another</h2>
        <a class="close" href="#">&times;</a>
        <div class="content">
            other content
        </div>
    </div>
</div>