html - "#"(井号，数字符号)如何关闭模态框？

Question

我最近读了这篇关于创建纯 CSS 模态框的文章:

• Creating a modal window with HTML5 & CSS3

我已经测试了代码，它运行良好。我将它用于我网站的联系和注册/登录页面。

有一部分代码我还没有完全掌握。

这是怎么...

<a href="#close" title="Close" class="close">X</a>

...关闭盒子？

CSS 中没有任何内容可以隐藏或删除具有 close 类的元素，也没有针对 href、#close 的任何类似函数或标题。这只是一行代码本身，当用户点击它时，模态窗口关闭(整洁优雅，我可能会补充)。

很明显，“关闭”文本无关紧要。文本可以是任何内容，并且该功能有效。但是，如果删除“#”，样式将失败，但窗口仍会关闭。

那么“#”有什么特别之处呢？

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
}
.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
  <div>
    <a href="#" 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>

Answer 1

当您点击 href="#openModal"时，它会找到 id="openModal"的片段并将焦点放在它上面。改变它的状态。 css .modalDialog:target 开始运行，使模态以不透明度可见:1。

当您单击 href="#close"时，它会尝试查找不存在的片段 id="close"。它还会从任何其他片段中移除焦点，从而使 modalDialog 失去焦点。所以没有什么是焦点。和模态关闭。