使用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 相关文章推荐
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 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的字符串用法小结
2010/06/08 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
解析PHP的Yii框架中cookie和session功能的相关操作
2016/03/17 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
JS防抖和节流实例解析
2019/09/24 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python numpy中cumsum的用法详解
2019/10/17 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
keras的三种模型实现与区别说明
2020/07/03 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
数控专业自荐书范文
2014/03/16 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
元旦主持词开场白
2015/05/29 职场文书
大国崛起观后感
2015/06/02 职场文书
美丽人生观后感
2015/06/03 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA