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改为:
打开模态框
模态框内
将模态框的初始状态改为隐藏，并在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
打开模态框
关闭模态框
模态框内
这样基本的打开以及关闭模态框的交互就完成了，让我们再简单优化一下样式，使其看起来至少美观一些
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
打开模态框
关闭模态框
模态框内
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: 多模态框实现
html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框相关推荐
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- html怎么让图标动起来,让ICON生动起来 纯CSS实现带动画的天气图标
让ICON生动起来 纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- 纯css实现带斜角的边框样式
纯css实现带斜角的边框样式,是边框哦 展示效果 斜角优化前(百度上找到的方法) 斜角优化后(想了个花里胡哨的办法) 直接贴代码 说明下原理 展示效果 斜角优化前(百度上找到的方法) 斜角优化后(想了 ...
- 纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html><head> ...
- 纯css制作带三角(兼容所有浏览器)
如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...
- 用纯CSS禁止鼠标点击事件以及禁止鼠标样式
pointer-events: none; cursor: not-allowed;
- css特效实例——纯css实现带边角卷边阴影的纸
<template><div class="container"><div class="page"><h4 clas ...
最新文章
- SCRM管理系统应具备的8大特点
- R语言关系操作符：＞、＜=、!=、＞=、==、
- 组件的高可用性 High Availability
- Mybatis原理分析之一：从JDBC到Mybatis
- Kubernetes 弹性伸缩全场景解读（二）- HPA 的原理与演进
- 【Leetcode】岛屿问题（数量，周长，面积）
- Unity TA总监王靖：Unity如何实现美术画质升级？
- 【VB.NET】测验题目Quiz2
- 生产排期混乱、质量问题难定位？这套生产场景方案全解决，附模板
- ubuntu lamp（apache+mysql+php) 环境搭建及相关扩展更新
- jdbc mysql url写法_MySQL第04篇：JDBC
- 串灯控制盒去掉怎么接_暖通小兵设计系列16-集线盒（中央控制器）简介（余小其转载版本）...
- 项目常用工具类整理（二）--ckeditor的引用
- HDU 1862 EXCEL次序 （排序水问题）
- 2018百度之星程序设计大赛初赛B——1004p1m2
- c51单片机学习笔记二
- 密度计算机公式,密度浓度换算公式(浓度和密度的换算关系)
- 工业革命的秋之涟漪（三）：飞桨，划行在智能经济之海
- 剖析Solidity合约创建EVM bytecode
- TTO热转印打码机色带的故障与维护技巧