使用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实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 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高自定义性安全验证码代码
2011/11/27 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
基于ionic实现下拉刷新功能
2018/05/10 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
js实现录音上传功能
2019/11/22 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
python和c语言的主要区别总结
2019/07/07 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python3.7调试的实例方法
2020/07/21 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
幼儿园课题方案
2014/06/09 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
高中家长意见怎么写
2015/06/03 职场文书
创业的9条正确思考方式
2019/08/26 职场文书