纯CSS实现带点击模态框外部自动关闭的模态框

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

实现思路：

  1. 使用HTML中checkbox类型的input标签

  2. 使用label来切换checkbox的选中状态

  3. 使用css中的:checked伪类选择器根据checkbox是否被选中切换页面元素的样式

  4. 使用css的属性选择器来添加多功能开关

开始实现：

首先我们先写出基本结构

HTML

<div id="modal" class="modal__wrapper">
<div class="modal">
<div class="modal__main">
<p> 模态框内容 </p>
</div>
</div>
</div>

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改为:

<div id="modal" class="modal__wrapper">
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">打开模态框</label>
<div class="modal">
<div class="modal__body">
<p> 模态框内 </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>

将模态框的初始状态改为隐藏，并在checkbox选中时显示

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #ffffff;
display: none;
}
.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;
display: none;
}
.modal__state:checked + label{
display: none;
}
.modal__state:checked + label + .modal,
.modal__state:checked + label + .modal + .modal-overlay{
display: block;
}

目前我们可以实现点击复选框打开模态框了，但是打开之后我们关闭不了，所以我们需要让打开的弹框可以关闭，接下来只需要做一件事情，就是在打开的模态框中再添加一个label，如：

HTML

<div id="modal" class="modal__wrapper">
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">打开模态框</label>
<div class="modal">
<div class="modal__body">
<label class="modal__toggle modal__toggle--outside" for="modal__state">关闭模态框</label>
<p> 模态框内 </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>

这样基本的打开以及关闭模态框的交互就完成了，让我们再简单优化一下样式，使其看起来至少美观一些

CSS

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #fff;
display: none;
}
.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;
display: none;
}
.modal__state:checked + label{
display: none;
}
.modal__state:checked + label + .modal,
.modal__state:checked + label + .modal + .modal-overlay{
display: block;
}
.modal__state{
position: fixed;
top: -9999px;
}
.modal__wrapper .modal__toggle {
padding: 1rem;
display: inline-block;
margin-top: -1rem;
margin-right: -1rem;
color: black;
}
.modal__wrapper .modal__toggle--outside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 1rem;
background: #df2f2f;
cursor: pointer;
}
.modal__wrapper .modal__toggle--inside {
float: right;
font-size: 4rem;
width: 2rem;
height: 2rem;
text-align: center;
cursor: pointer;
transition: 0.15s;
margin-top: -3.5rem;
margin-right: -2rem;
}

现在我们的模态框看起来就美观多了

最终效果.png

目前已经实现了打开和关闭的切换，那么如何实现点击模块框外面关闭模态框呢？可能这部分看起来比较复杂一些，但是其实也非常的简单。默认状态下我们显示的是由一个DIV实现的蒙层，但是如果我们将DIV也换成一个label呢？那应该就跟关闭按钮的逻辑一样了。
另外，为了使得我们的模块框能够适应点击模块框外部关闭或者不关闭两种情况，我们还可以利用css的属性选择器来实现功能的开关。下面是我们最终的html和css。

HTML

<div id="modal" class="modal__wrapper" outside-close>
<input id="modal__state" class="modal__state" type="checkbox">
<label class="modal__toggle modal__toggle--outside" for="modal__state">打开模态框</label>
<div class="modal">
<div class="modal__body">
<label class="modal__toggle modal__toggle--outside" for="modal__state">关闭模态框</label>
<p> 模态框内 </p>
</div>
</div>
<div class="modal-overlay"></div>
</div>

CSS样式

.modal {
width: 50%;
height: 50vh;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
background: #fff;
display: none;
}
.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;
display: none;
}
.modal__state:checked + label{
display: none;
}
.modal__state:checked + label + .modal,
.modal__state:checked + label + .modal + .modal-overlay{
display: block;
}
.modal__state{
position: fixed;
top: -9999px;
}
.modal__wrapper .modal__toggle {
padding: 1rem;
display: inline-block;
margin-top: -1rem;
margin-right: -1rem;
color: black;
}
.modal__wrapper .modal__toggle--outside {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin-top: 1rem;
background: #df2f2f;
cursor: pointer;
}
.modal__wrapper .modal__toggle--inside {
float: right;
font-size: 4rem;
width: 2rem;
height: 2rem;
text-align: center;
cursor: pointer;
transition: 0.15s;
margin-top: -3.5rem;
margin-right: -2rem;
}
.modal__wrapper[outside-close] .modal__state:checked + label + .modal + .modal-overlay {
display: none;
}
.modal__wrapper[outside-close] .modal__state:checked + label.modal__toggle--outside{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
padding: 0;
background-color: rgba(43, 46, 56, 0.9);
z-index: 1;
display: block;
transform: translate(0, 0);
margin-top: 0;
color: transparent;
}

现在的这种实现目前只适用于页面上只有一个模态框的情况，如果需要实现多个也是可能的，只需要做几个简单的改动即可实现。

Demo 1: 单模态框实现
Demo 2: 多模态框实现

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Weex中支持的标签用法讲解
    在学习weex的过程中看到了常用标签相关的内容，为了自己以后能够快速查阅特整理出此文档。 a 简介组件定义了指向某...
    TyroneTang阅读 4,701评论 1赞 3
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1赞 92
  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,644评论 0赞 8
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,195评论 0赞 11
  • 日精进打卡第35天
    姓名:黄太平 公司：宁波大发化纤有限公司 组别：301期反省组学员 【知~学习】 1、《六项精进》读 1遍 2、《...
    黄太平阅读 156评论 0赞 0