使用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中必须要知道的10个顶级命令
Apr 26 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
json数据格式常见操作示例
2019/06/13 Javascript
vue实现分页栏效果
2019/06/28 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
python Tornado框架的使用示例
2020/10/19 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python解包用法详解
2021/02/17 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
外企测试工程师面试题
2015/02/01 面试题
书法比赛获奖感言
2014/02/10 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
优秀党员申报材料
2014/12/18 职场文书
开学典礼观后感
2015/06/15 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
创业计划书之熟食店
2019/10/16 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android