html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框

在网页中我们经常会用到模态框，一般会用于显示表单或者是提示信息。由于模态框涉及到页面上比较多的交互效果，最简单的交互就是打开以及关闭两个操作，而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这样的功能，因为这些交互问题，所以一般都会首先考虑到使用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改为:

打开模态框

模态框内