html5.2 dialog简介详解


Posted in HTML / CSS onFebruary 27, 2018

2017年12月24号, HTML5.2 标准固化,也代表着移动端进入 HTML5.3 规划阶段,虽然 HTML5.2 固化了,但内部的一些新规范,在移动端的浏览器中的支持性还有待提高,这里我们来看一个算是常用的新被纳入标准的标签吧,它就是 dialog 标签。

1. 写在前面

说起 dialog 标签,可能很多人都比较陌生,毕竟这个标签直到 HTML5.2 标准固定,也只是 chrome 的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话。

这里我们可能会想到的是, alert , confirm 等弹窗,是的,它们是同一个家族的,都是弹出框,接下来我们就简单的看看, dialog 标签的一些属性与使用场景。

2. 标签使用

<dialog open="">      
 <h2>Title</h2>    
 <p>Content</p>
</dialog>

既然是标签,那么其实与我们常用的 div , p 等标签一样,如上面的示例代码所示,其内部支持任意的其他元素。

这里,你可能会注意到,在上面的示例代码中的 open 属性,是的,这个是用来控制这个弹窗的显示和隐藏的,当然,你也可以任性的使用 css 来控制,只是那样在一些设备的辅助功能时(比如无障碍访问,读屏软件等),就会出现异常了,所以建议还是使用标准中的显示与隐藏功能。

3. 支持的默认方法

首先, dialog 标签是 HTMLDialogElement 的一个示例,继承自 HTMLElement ,所以,它与div这一的标签是属于同层次的标签,唯一不同的是,它比div有更多的默认功能,这一小节,我们就来看看, dialog 有哪些默认的方法供我们使用。

var dialog = document.getElementById("dialog");
// 假设页面中,有一个id=dialog的dialog标签

// 关闭dialog
dialog.close();

// 以toast的形式显示dialog
dialog.show();

// 以模态框的形式显示dialog
dialog.showModal();

// dialog.close()调用时传入的参数值
dialog.returnVlaue;

// dialog的显示状态
dialog.open;

你可以自己先去示例中,操作一下,然后看看有哪些特色,然后再回来对比一下,接下来的总结:

1: close 方法,可以多次被调用,即便是隐藏状态,也可以再次被调用。

2: close 可以传入一个变量,这个变量必须是字符串,在 returnVlaue 中表现。

3: show 方法,也可以多次被调用,即便在隐藏状态,不会有任何问题。

4: show 方法,不会更改 toast 的位置,弹出框原本在什么位置, show 方法调用之后,依然在原有的位置。

5: show 方法,显示位置紧挨着前一个元素后面,居中,没有背后的遮罩层, z-index 的显示方式与 relative 不设置 z-index 的类似(如果在此之前,没有调用过 showModal 的话)。

6: 如果调用过 showModal 后,那么 show 方法后,元素显示在 showModal 显示的位置,不会变动(即便内容高度变化了很多)。

7: 如果有两个 dialog 元素,都调用 show 方法,在 html 结构中,后面的 dialog 会永远覆盖在前面的那个上层(不管那个 dialog 先调用了 show 方法)。

8: showModal 的显示,背后会有遮罩层,显示层级是浏览器 webview 级别的,怎么理解呢,你可以设置一个元素,级别非常高,在使用 showModal 显示出 dialog 属性后, dialog 都是在最前面的,这一点特别适合做模态框,肯定不会在弹出框出现之后,出现层级混乱的情况。

9: showModal 只能调用一次,这里的一次是说,如果 dialog 在显示状态,那么在再次调用 showModal ,就会报错,并且不能直接执行,或者说,只要 open 属性存在的情况下,再次调用,都会报错,所以还是使用默认的 open 属性来做 dialog 的显示隐藏更好。

10: 如果页面上有两个 dialog 元素,都在调用 showModal 方法的话,不论他们在 HTML 中的结构,后调用的 dialog 的层级会高于之前调用的 dialog 的层级。

11: dialog.returnVlaue 的取值,是 dialog.close(string) 调用时传入的值,只支持字符串,只有在 dialog 的显示的情况下,调用 dialog.close 传入的值,才有效。

12: 如果一直没有在 close 中传值,那么 returnVlaue 的值为空,如果某次传值 dialog.close("1") ,再下次 show 之后, dialog.close() 关闭, returnVlaue 依然等于“1”。

13: open 的返回值是: true/false 。

4. 支持的默认事件

dialog 还有一个好处就是,它支持出 click 等基础事件之外的,额外两个针对于 dialog 的特殊事件:

var dialog = document.getElementById("dialog");
// 假设页面中,有一个id=dialog的dialog标签

// 当调用close方法时
dialog.onclose = function(){};

// 当在pc端按下esc按键时。不过在chrome版本之后,好像不管用了。
dialog.oncancel = function(){};

现在来看一个示例: dialog 事件示例展示。

也有几个问题,这里来列举一下:

1: 只要调用 dialog.close() 来隐藏的 dialog ,才能触发 onclose 事件。

2: cancel 事件触发之后,必定会继续触发 close 事件, chrome64 版本之后, cancel 的触发,不是 esc 按键了。

3: 如果有多种关闭 dialog 的按钮,那么在每次调用 close 的时候传入不同的值,在 close 事件的回调里面,使用 returnVlaue 的取值,来判断,是哪个按钮用来触发的关闭事件。

5. 其他

前面把 dialog 的一些表现进了说明,可能有不全,不准确的情况,也可能随着时间的推移,有更新的特性出现,欢迎提出补充。

在看前面的示例时,我们也看到了一下不足的地方,比如:样式特别丑,关于这点,我们可以完全使用CSS把样式reset掉,不影响语义,和其他的任何东西,放心重构就可以了。

这里只是想说一下, dialog 的表现,所以就不做这些了。

6. 总结

dialog 毕竟属于弹窗对话的语义化标签,并且有一些独有的优势(比如 webview 层级的高度),虽然现在只是chrome支持,但对于以后的使用,依然是很看好的,甚至现在也可以自己兼容一下,在其他浏览器,自己去实现一套 dialog 的机制(也许已经有这套实现方案了,这里就不去找了)。

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

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 #HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 #HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 #HTML / CSS
canvas绘制视频封面的方法
Feb 05 #HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 #HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 #HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 #HTML / CSS
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php7性能提升的原因详解
2019/10/13 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Python isinstance判断对象类型
2008/09/06 Python
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
django使用多个数据库的方法实例
2021/03/04 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
会计岗位职责
2013/11/08 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers