这个锚标签如何关闭弹出窗口？

Question

我刚刚完成了本教程：http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ - 了解HTML5 + CSS3的模态弹出窗口。我想知道的是锚标签如何能够关闭弹出窗口：

<div id="openModal" class="modalDialog">
<div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads,  or create a login/register form for users.</p>
</div>
</div>

我将href更改为＆＃34;＃＆＃34;并且它仍然有效，所以我猜测由于定位另一个元素，弹出窗口在CSS中失去其target状态，其不透明度被设置回0？

以下是来自其中一位评论者的Codepen：http://codepen.io/petebot/pen/DBvKj - 它不是确切的代码，但传达了相同的想法。

Answer 1

这是使用:target CSS3选择器完成的。只要#openModal是URL片段，它就匹配模式的ID，然后应用它上的样式。当您单击关闭链接时，片段会更改，并且样式不再适用，因此它将被关闭。

即使您要手动更改模式，模式也只会在目标为#openModal时保持打开状态。