"#"(哈希标记,数字符号)如何关闭模态框？

Question

我最近阅读了有关创建纯CSS模式框的文章:

• 使用HTML5和CSS3创建模态窗口

我已经测试了代码并且效果很好.我正在将它用于我网站的联系和注册/登录页面.

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

这是怎么回事......

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

...... 关上盒子？

CSS中close没有任何内容隐藏或删除带有类的元素,也没有任何类似的函数定位href,#close或者title.它只是一行代码本身,当用户点击它时,模态窗口关闭(整齐而优雅,我可能会添加).

很明显,"关闭"文本并不重要.文本可以是任何东西,功能也可以.但如果删除"#",则样式会失败,但窗口仍会关闭.

那么"#"有什么特别之处呢？

.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开始运行,使用opacity显示模态:1.

单击href ="#close"时,它会尝试查找片段id ="close",但不存在.它还从任何其他片段中移除焦点,使modalDialog松散焦点.所以没有什么是重点.和模态关闭.

Answer 2

哈希标记#有两个原因.

• 提供target作为内部位置.
• 允许target更改,从而允许模式通过CSS关闭.

根据定义,后面的字符串#表示URL片段.

来自MDN

URL片段是以哈希标记(#)开头的名称,它指定当前文档中的内部目标位置(ID).

虽然它在与脚本^[1]一起使用时通常是重新使用的,但是当它本身使用时 - 没有名称的哈希标记表示空片段标识符(表现出滚动到顶部行为).

导航到片段时,可以在HTML5文档中阅读所涉及的算法,其中包括对此行为的引用.

如果fragid是空字符串,则文档的指示部分是文档的顶部.

上下文

如果仅使用#标记,当模态关闭时,我们将观察到滚动顶部.如果页面的内容超出视口,则模态在中途打开.

如果#删除,则空的href只是超链接到当前文档,从而重新加载页面.

CSS Modal示例使用#close可能没有多大意义,但它通过将滚动引用到不存在的内部位置来阻止滚动到顶部行为.可能不是正确的方法,但这种用法指向preventDefault()通过CSS实现.从而使它成为'纯CSS模态'.

这是一个例子.

.scrollable-area {
  min-height: 150vh
}

<span>Top of Document</span>
<div class="scrollable-area"></div>
<a href="#">Empty. Scroll to top.</a><br>
<a href="#close">Non Empty. Stay Put.</a>

参考文献:

• /sf/answers/787229201/
• [1] - 为新网站重新利用哈希标志