一、提前准备
这里用到的知识点是锚点链接和: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基础的理解。
写这篇文章主要是因为参考这里一下子没转过弯来,所以自己做了个总结。