使用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 transform属性详解
Sep 30 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
纯html+css实现打字效果
Aug 02 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP完整的日历类(CLASS)
2006/11/27 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP文件锁定写入实例解析
2014/07/14 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
React如何避免重渲染
2018/04/10 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
公司领导推荐信
2013/11/12 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
总经理的岗位职责
2014/02/23 职场文书
农业项目合作意向书
2015/05/08 职场文书
MySQL 聚合函数排序
2021/07/16 MySQL