Html “怎么做？”#&引用；（散列标记、数字符号）是否关闭模式框？

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

我已经测试了代码，效果很好。我将其用于我的站点的联系人和注册/登录页面

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

这怎么

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

模态盒
这是一个示例模态框，可以使用CSS3的功能创建

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

正如文章所解释的，它在CSS中使用：target来触发不透明度：1；打开该框，检查close类并更改“不透明度”值以查看实际发生的情况

扩展我的评论，这个模式示例完全依赖于url的名称。它不仅首先用于“触发”模式显示，而且在锚链接中也用于抑制href。在这种情况下，

#

后面的文本与此无关，应省略

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

当您单击href=“#close”时，它会尝试查找不存在的片段id=“close”。它还从任何其他片段中移除焦点，使modalDialog失去焦点。因此，没有什么东西是焦点。模式关闭。

哈希标记之所以重要，有两个原因

• 提供

  目标

  作为内部位置
• 允许更改

  目标

  ，从而允许通过CSS关闭模式

根据定义，

#

后面的字符串表示URL片段

从

URL片段是一个名称，前面有一个哈希标记（#），用于指定当前文档中的内部目标位置（ID）

虽然它通常在与脚本一起使用[1]时被重新使用，但当它自己使用时，不带名称的哈希标记表示空片段标识符（显示滚动到顶部的行为）

在导航到片段时，可以在中阅读所涉及的算法，其中包括对该行为的引用

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

上下文

如果只使用了

#

标记，当模式关闭时，我们将看到一个滚动顶部。前提是页面内容超出了视口，并且模式在中间位置打开。

如果删除了

#

，则空的

href

只是指向当前文档的超链接，从而重新加载页面

CSS模式示例使用

#close

，这可能没有多大意义，但是通过引用不存在的内部位置来阻止滚动到顶部行为。可能不是正确的方法，但这种用法指向通过CSS实现的

preventDefault（）。从而使其成为“纯CSS模式”

这里有一个例子


。可滚动区域{
最低高度：150vh
}
文档顶部


“hash mark”是一个选择器（在js中，css…）来指向一个ID，因此如果你有
，并且你想用js应用一些功能或css样式，你会选择它作为“#test”（如果你使用或不使用jQuery框架，代码会有所不同）。Jquery是目前使用最多的，因此您可以找到$（“#test”）我将尝试解释模态关闭是如何工作的，但首先我需要解释所有模态部分，以使我们处于这种情况作为解释，我将使用bootstrap的模态作为示例（目前使用最多）模式：



引导示例
模态示例
开放模态
&时代；
模态头
模态中的一些文本

接近
首先，澄清一下：

：target伪类用于设置作为
文档中内部链接的目标

此元素不在任何焦点状态，它只是内部链接的目标


基本上，
#
表示HTML对象中的片段标识符。它跟随整个对象的URL，这就是为什么需要使用
#
作为分隔符

URI末尾的片段标识符也称为
URL的“哈希”


所以，真正的问题是

如果不声明散列，会发生什么？
当片段id不存在或无效时，目标现在是整个对象。这意味着目标现在是整个HTML文档

您可以在关闭模式时看到此行为，它将一直跳到文档顶部，指向您的
标记

滚动后，请参见此处：


正文{
高度：300vh；
}
a:第一种{
位置：固定；
}
莫达尔迪亚洛先生{
位置：固定；
字体系列：Arial、Helvetica、无衬线字体；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：99999；
不透明度：0；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
.modalDialog>div{
宽度：400px；
位置：相对位置；
利润率：10%自动；
填充：5px20px 13px 20px；
边界半径：10px；
背景：#fff；
}
.结束{
背景:#606061；
颜色：#FFFFFF；
线高：25px；
位置：绝对位置；
右：-12px；
文本对齐：居中；
顶部：-10px；
宽度：24px；
文字装饰：无；
字体大小：粗体；
边界半径：12px；
箱