使用HTML5和CSS3制作一个模态框的示例


Posted in HTML / CSS onMarch 07, 2018

本文介绍了使用HTML5和CSS3制作一个模态框的示例,分享给大家,具体如下:

源码示例

可能你并不想看我下面的一堆冗长的说明,想直接查看源码或者一个在线示例。下面的链接,是我使用 CSS3 的 transition(过渡),opacity(不透明度),pointer-event(指针事件)等属性创建的一个功能型模态框。

你可以点击它前往 Github 查看源码: ModalBox-Tutorial

HTML 结构

前端的组件都是由业务和交互场景来驱动,模态框也不例外,常见的场景便是进行某个操作,如点击按钮,然后显示一个模态框,反馈给用户或引导用户去执行接下来的交互。一个模态框的交互可能会包含 5 个步骤:

1. 有一个按钮或者链接,用户点击它来触发模态框的显示;

2. 模态框显示时,会有一个透明的遮罩层,遮挡住当前整个视口;

3. 模态框内容会以非透明色(通常是白色)出现在视口某个位置(通常是中间);

4. 模态框内容(通常在右上角)会有一个“关闭”标志,点击它会让模态框隐藏;

5. 模态框内容应该是根据实际业务场景所指定的,因此可以为任意结构。

使用HTML5和CSS3制作一个模态框的示例

样式

1. .modalbox 最初是隐藏的;

1.  .modalbox  为一个透明的遮罩层;

2. .modalbox-dialog 为一个非透明的内容层;

3. 点击 显示模态框链接 后,.modalbox 会显示;

4. 点击  .modalbox-close-btn 后,.modalbox 会隐藏;

使用HTML5和CSS3制作一个模态框的示例

效果示例

使用HTML5和CSS3制作一个模态框的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3悬停效果案例应用
Nov 21 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 #HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 #HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 #HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 #HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 #HTML / CSS
html5.2 dialog简介详解
Feb 27 #HTML / CSS
Html5页面中的返回实现的方法
Feb 26 #HTML / CSS
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
详解vue v-model
2020/08/31 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
python运行时间的几种方法
2016/06/17 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
pycharm快捷键汇总
2020/02/14 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
Ruby如何定义一个类
2012/10/08 面试题
幼儿园教师奖惩制度
2014/02/01 职场文书
机关搬迁方案
2014/05/18 职场文书
增员口号大全
2014/06/18 职场文书
讲党性心得体会
2014/09/03 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python