4.1 纯css、html实现模态框（不用js）

一、提前准备

这里用到的知识点是锚点链接和:target

1）、锚点链接

锚点顾名思义就是一个定位器，通常在页面会用于制作目录（就是点击目录会跳到页面相应的内容）。
例如：
锚点链接：<a href="#one">第一章</a>
给锚点标记<div id="one">第一章内容</div>
我们在定义锚点链接主要用到a标签的href链接属性，而href是a标签的特有属性，所以不要用其他标签。而锚点标记主要是id选择器，这里div标签可以替换成其他标签。总体我们可以理解为id选择器与a标签的结合。

2）、:target

:target选择器跟:hover选择器使用方法很像。当我们点击锚点链接时会将:target选择的样式给引用。
例如：本来想写出自己的理解，发现还w3s文档解释够透彻。看这里
发现我们随着点击锚点链接，随之而来的是:target将样式赋予了锚点标记。而我们这里将要讲到的模态框就是在这基础上稍微变动一下就行了。毕竟知识是固定的，我们是有自己思维的，所以我们要灵活运用一下就行。

二、开始操作

CSS:

.hid{
			position: fixed;
			width: 300px;
			height: 300px;
			top: 50%;
			left: 50%;
			margin-top: -150px;
			margin-left: -150px;
			background-color: pink;
			display: none;
		}
		.hid:target{
			display: block;
		}
		.hid > a{    
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.3);
		}
		.hid:target > a{          /*类似:hover的使用*/
			display: block;
		}

HTML:

<div class="con">
		<a href="#motai">点击显示模态框</a>
	</div>
	<div id="motai" class="hid" >
		<a href=""></a>           /*这里用a标签是为了实现点击阴影部分时也能关闭模态框*/
		<p><a href="">X</a></p>       /*点击关闭模态框*/
		<div>我是模态框</div>
	</div>

效果：

• 我们发现本该点击锚点链接的时候会跳到锚点标记上，但因为加了：target，所以让本该跳转的功能发挥在了:target选择器上，让:target内的样式作用于锚点标记上。
• 这里用到的:target选择器跟a标签里特有属性target不是一个概念，要注意区分。
• 用a标签作为关闭模态框其实就是利用了a标签自带的点击跳转页面时刷新事件。
• 文章的内容在后期真正开发项目中是不会用到的东西，在这里写出来只是为了加深对css、html基础的理解。
  写这篇文章主要是因为参考这里一下子没转过弯来，所以自己做了个总结。