浅谈HTML5中dialog元素尝鲜


Posted in HTML / CSS onOctober 15, 2018

对话框(别称模态框,浮层)是web项目中用于用户交互的重要部分,我们最常见的就是js中 alert(),confirm(),但是这个对话框的不美观,也不能自定义样式,所以在开发的过程中,一般根据自己自己的需求造轮子或者使用第三方的。

对话框的组成

常见的弹出框形式:

位置:屏幕的左上角,右上角,左下角,右下角,垂直居中等

大小:定宽定高,定宽不定高,不定宽不定高等

开发中的对话框形式就是位置和大小随机组合的一种情况。

但是有一种情况(不定宽高的垂直居中)不易实现(可以使用display:table或css3的translate或flex实现),具体可参考水平垂直居中布局

上面的对话框包含内容的容器,还有一个是对话框下面的遮罩层(mask),遮罩层是用户触发弹出框后,形成的一个对话框与页面主体的分割图层,它的存在可以给用户一个更明显的视觉差效果,同时也起到避免用户触发对话框后的其他不必要的页面主体操作,从而产生更有的用户体验。

存在问题

虽然,有很多对话框的轮子供我们选择,但是我们面临着各种各样的问题。

  • 到底选择哪一种对话框(对于有选择综合症的人来说一个头疼的问题)
  • 可用性(api的简单与否,是否依赖了其他第三方的库)
  • 可扩展性
  • 浏览器的兼容性支持

那么,有没有一个简单的方法来做做一个对话框呢?当然有,我们可以使用HTML5的 dialog 元素。

HTML5(dialog)

<dialog open>
    <h2> Hello world.</h2>
</dialog>

很简单,我们使用上面的代码就可以做一个弹出内容为‘Hello world.’ 的对话框。

控制对话框的显示/隐藏也很容易,添加 open 属性表示显示,去除为隐藏。当然,我们也可以通过DOM接口来控制 dialog 的显隐(show(), close())

对话框下面的遮罩层,我们可以使用 ::backgrop 伪元素,而它的激活,我们需要使用 showModal() 这个DOM的API,::backgrop 的特性是它的位置在dialog之下,在任何 z-index 之上。

使用 showModal() 不仅可以让遮罩层显示,dialog容器也显示,所以用到 ::backdrop 的时候,可以用 showModal() 代替 show() 这个API;如果按键盘 ESC 键将关闭弹出层,当然你一可以使用 close() 这个DOM API。

我们可以设置 ::backdrop 这个图层为半透明图层,代码如下:

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

除了我们常见的提示信息的弹出层外,还有一类比较使用的是带表单的弹出层。

带表单的弹出层

我们可以使用HTML5的dialog元素结合form元素来做这些弹出层吗?

答:可以

我们怎么做才能让form元素和dialog元素紧密的结合起来呢?

答:我们只需要在dialog元素中添加 method="dialog" 这个属性即可,这样就可以将button元素的属性 value 的值传递给dialog元素。

<dialog>
  <form method="dialog">
    <p>确定 or 取消</p>
    <button type="submit" value="yes">确定</button>
    <button type="submit" value="no">取消</button>
  </form>
</dialog>

<script>
    var dialog = document.querySelector('dialog')
    dialog.showModal()
    dialog.addEventListener('close', function(event) {
        console.log(dialog.returnValue)
    })
</script>

demo

浏览器兼容性

虽然,这是一个比较好用的HTML5,但是还存在兼容性问题,chrome和opera支持的比较好,Firefox中是实验特性,但是IE,Edge, safari支持的不好,ios不支持,Android也支持的不够好,只有Android6以后支持。具体可参考caniuse

那么,能不能让旧版本的浏览器支持HTML5的dialog呢?首先,我们想到的是有没有一个支持dialog的polyfill,就像支持es6新特性的babel-polyfill一样,确实有这样一个开源项目a11y-dialog,它分别提供了vue和react的不同版本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 #HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 #HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 #HTML / CSS
HTML5实现签到 功能
Oct 09 #HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 #HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 #HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 #HTML / CSS
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
dojo随手记 gird组件引用
2011/02/24 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery源码解读之addClass()方法分析
2015/02/20 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
Cpy和Python的效率对比
2015/03/20 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
带病坚持工作事迹
2014/05/03 职场文书
大学生求职信范文
2014/05/24 职场文书
三严三实对照检查材料
2014/09/22 职场文书
单位租房协议范本
2014/12/03 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
python爬虫--selenium模块
2021/03/31 Python