Question

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

Creating a modal window with 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 =＆＃34;＃openModal＆＃34;时，它会找到id =＆＃34; openModal＆＃34;的片段。并把重点放在它上面。改变它的状态。 css .modalDialog：target开始行动，使模态可见，不透明：1。

当您点击href =＆＃34; #close＆＃34;时，它会尝试查找片段ID =＆＃34;关闭＆＃34;，这不存在。它还从任何其他片段中移除焦点，使modalDialog松散焦点。所以没有什么是重点。和模态关闭。

Answer 2

哈希标记#有两个原因。

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

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

来自MDN

URL片段是一个以哈希标记（＃）开头的名称，它指定当前文档中的内部目标位置（ID）。

虽然在与脚本^[1]一起使用时通常会重新使用它，但在单独使用时 - 没有名称的哈希标记表示空片段标识符（展示滚动到顶部的行为）。

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

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

的上下文

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

如果删除#，则空href只会超链接到您当前的文档，从而重新加载页面。

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

参考文献：

https://stackoverflow.com/a/11246131/5496966

[1] - Repurposing the Hash Sign for the New Web

Answer 3

＆＃34;哈希标记＆＃34;是一个指向ID的选择器（在js，css ...中），所以如果你有<div id="test">并且想要用js应用某些功能或一些css样式，你会选择它作为＆＃39; #test＆＃39; （如果你使用jQuery框架，代码会有所不同）。 Jquery是现在最常用的，所以你会发现$（＆＃39; #test＆＃39;）。 我将尝试解释模态关闭是如何工作的，但首先我需要解释所有模态部分以便将我们置于其中作为解释，我将使用示例bootstrap＆＃39; s modal（作为其这个时候最常用的）。模态：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

＆＃13;

＆＃34;触发＆＃34;部分：

要触发模态窗口，您需要使用按钮或链接。然后包括两个data- *属性：

data-toggle="modal" opens the modal window

data-target="#myModal" points to the id of the modal

＆＃34;模态＆＃34;部分：

模态的父<div>必须具有与用于触发模态的数据目标属性的值相同的ID（＆＃34; myModal＆＃34;）。

.modal 类将<div>的内容标识为模态，并将重点放在其上。

.fade 类会添加一个过渡效果，该效果会淡化模式的输入和输出。如果您不想要此效果，请删除此类。

属性 role =＆＃34;对话框＆＃34; 改善了使用屏幕阅读器的用户的可访问性。

.modal-dialog 类设置模态的正确宽度和边距。

＆＃34;模态内容＆＃34;部分：

带有 class =＆＃34;模态内容＆＃34; 的<div>为模式设置样式（边框，背景颜色等）。在此<div>内，添加模式的页眉，正文和页脚。

.modal-header 类用于定义模式标题的样式。标头内的 <button> 有一个 data-dismiss =＆＃34; modal＆＃34;属性，如果单击它将关闭模态。 .close 类为关闭按钮设置样式， .modal-title 类使用正确的行高设置标题样式。

.modal-body 类用于定义模态主体的样式。在这里添加任何HTML标记;段落，图像，视频等。

.modal-footer 类用于定义模态页脚的样式。请注意，默认情况下，此区域右对齐。

模态大小

通过为小模态添加 .modal-sm 类或为大模态添加 .modal-lg 类来更改模态的大小。

使用类 .modal-dialog 将大小类添加到<div>元素：小：

<div class="modal-dialog modal-sm">

大

<div class="modal-dialog modal-lg">

注意：要让中等大小的模态让它＆＃34;按原样＃34;不添加modal- *类。默认情况下，模态的大小适中。

要恢复并回答您的问题，请使用data-dismiss =＆＃34; modal＆＃34;而close类是由bootstrap的javaScript（使用jQuery，但在这种情况下不相关）然后更改display：block;显示：无;和许多其他风格，比较自己：

已打开的模式：

bottom:0px;
box-sizing:border-box;
color: rgb(51, 51, 51);
display:block;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
height:89px;
left:0px;
line-height:20px;
opacity:1;
outline-color:rgb(51, 51, 51);
outline-style:none;
outline-width:0px;
overflow-x:hidden;
overflow-y:auto;
padding-left:17px;
position:fixed;
right:0px;
top:0px;
transition-delay:0s;
transition-duration:0.15s;
transition-property:opacity;
transition-timing-function:linear;
width:1329px;
z-index:1050;

封闭模式：

bottom:0px;
box-sizing:border-box;
color:rgb(51, 51, 51);
display:none; /* changed */
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
height:auto;  /* changed */
left:0px;
line-height:20px;
opacity:0;  /* changed */
outline-color:rgb(51, 51, 51);
outline-style:none;
outline-width:0px;
overflow-x:hidden;
overflow-y:hidden;
position:fixed;
right:0px;
top:0px;
transition-delay:0s;
transition-duration:0.15s;
transition-property:opacity;
transition-timing-function:linear;
width:auto;  /* changed */
z-index:1050;

注意其他像padding-left的人消失了。

这可以通过简单地使用jQuery实现：

<script type="text/javascript">
     $('#CloseButtonID').click(){
         $('#modalID').css('display','none');
         $('#modalID').css('opacity', 0);
     }
</script>

在你的情况下，使用简单的css3模态，事实是在modalDialog上，当打开时：目标状态它改变不透明度：0到不透明度：1。 如何？ 当您点击<a href="#openModal">时，目标指向<div id="openModal" class="modalDialog">（请注意＃指向ID），因此modalDialog更改为modalDialog：target。

那么关闭模态呢？ 当你单击<a href="#">时，目标转到＃（当使用＃时单个href表示你所在的页面相同）所以它使modalDialog松开：target并返回不透明度：0;

Answer 4

首先，澄清一下：

：target伪类用于设置一个元素的样式文档中内部链接的目标。

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

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

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

所以，真正的问题......

如果您不声明哈希，会发生什么？

当片段ID不存在或无效时，目标现在是整个对象。意味着目标现在是整个HTML文档。

关闭模式时，您会看到此行为，它会一直跳到文档顶部的<html>标记。

滚动后在此处查看：

body {
  height: 300vh;
}
a:first-of-type {
  position: fixed;
}
.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>

旁注：

我正在研究我网站上的类似内容，目前正在使用两个带有纯CSS的模态，偶然发现它一直跳到顶端的问题，这就是我做研究的原因。我不想要这种行为，所以我做的是我为我的固定菜单定义了一个id，并将其设置为关闭按钮的片段ID。

你可以做的是定义一个空元素，在你的开始元素旁边有一个id，这样当你关闭你的模态时它就不会跳到顶部。

Answer 5

扩展我的评论，这个模态示例完全依赖于网址的fragment identifier。它不仅用于触发＆＃34;模态显示在第一位，但它也在锚链接中用于抑制href。 #之后的文本在这种情况下无关紧要，应该省略。

Answer 6

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

“＃”（哈希标记，数字符号）如何关闭模态框？

6 个答案:

＆＃34;触发＆＃34;部分：

＆＃34;模态＆＃34;部分：

＆＃34;模态内容＆＃34;部分：

模态大小

如果您不声明哈希，会发生什么？