在网页中我们经常会用到模态框，一般会用于显示表单或者是提示信息。由于模态框涉及到页面上比较多的交互效果，最简单的交互就是打开以及关闭两个操作，而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这样的功能，因为这些交互问题，所以一般都会首先考虑到使用JavaScript实现。但是我们也可以使用纯CSS来实现。
实现思路：
使用HTML中checkbox类型的input标签
使用label来切换checkbox的选中状态
使用css中的:checked伪类选择器根据checkbox是否被选中切换页面元素的样式
使用css的属性选择器来添加多功能开关
开始实现：
首先我们先写出基本结构
HTML
模态框内容
CSS:
.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #ffffff;
}
.modal__body {
padding: 3rem 1rem;
}
.modal-overlay {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
}
现在我们能够看到模态主体部分以及背景蒙版的样式了。
基本样式.png
接下来让我们给这个模态框添加开关
将HTML改为:
打开模态框
模态框内
