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基础的理解。
    写这篇文章主要是因为参考这里一下子没转过弯来,所以自己做了个总结。
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页