html中的dialog怎么用
这篇文章主要介绍“html中的dialog怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html中的dialog怎么用”文章能帮助大家解决问题。
成都服务器托管,创新互联公司提供包括服务器租用、西部信息服务器租用、带宽租用、云主机、机柜租用、主机租用托管、CDN网站加速、申请域名等业务的一体化完整服务。电话咨询:028-86922220
1. 写在前面
说起 dialog 标签,可能很多人都比较陌生,毕竟这个标签直到 HTML5.2 标准固定,也只是 chrome 的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话。
这里我们可能会想到的是, alert , confirm 等弹窗,是的,它们是同一个家族的,都是弹出框,接下来我们就简单的看看, dialog 标签的一些属性与使用场景。
2. 标签使用
既然是标签,那么其实与我们常用的 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 的取值,来判断,是哪个按钮用来触发的关闭事件。
关于“html中的dialog怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。
网站标题:html中的dialog怎么用
链接地址:http://myzitong.com/article/giddgo.html