使用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.0新属性效果在ie下的解决方案
May 10 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
HTML中link标签属性的具体用法
May 07 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 ajax异步读取rss文档数据
2016/03/29 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python代码调试的几种方法总结
2015/04/15 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python操作MySQL数据库的方法
2018/06/20 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
python中类与对象之间的关系详解
2020/12/16 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
2015年话务员工作总结
2015/04/29 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server