HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?
HTML5 dialog标签的定义和用法:
dialog> 标签定义对话,比如交谈。
这有实例:
dialog> dt> 老师/dt> dd> 1+1 等于?/dd> dt> 学生/dt> dd> 2/dd> dt> 老师/dt> dd> 答对了!/dd> /dialog>
提示和注释:
提示:对话中的每个句子都必须属于 dt> 标签所定义的部分。请看下面的例子。
标签定义及使用说明:
dialog> 标签定义一个对话框、确认框或窗口。
这是实例:
table border="1"> tr> th> January dialog oPEn> This is an open dialog window/dialog> /th> th> February/th> th> mArch/th> /tr> tr> td> 31/td> td> 28/td> td> 31/td> /tr> /table>
HTML5 dialog标签属性:
open :open规定 dialog 元素是有效的,用户可以与它进行交互。
近期,网页上的的许多流程都需要用户完全同意才可以完成。例如,用户可能需要删除帐户,更改他们的用户名,或确认货币交易。
这种情况下,常用的用户体验(UX,User experience design)是显示一个具有两个按钮的对话框。一个是取消,一个是继续。这么多年,我们一直依靠JavaScript库实现此效果,但在本篇文章中,我们要用dialog> 元素实现此效果。
使用dialog元素:
dialog> 是一个HTML5(精确来说是5.1)元素。它归类为“切片根”,类似body> ,blockquote> ,和details> 元素,其中每个都会建立一个新的独立的内容区域,你可以把它作为body的一个孩子,或者是嵌套的元素,如div> 或section> ——两种元素都有效,如下所示。
body> div> dialog> /dialog> /div> section> dialog> /dialog> /section> dialog> /dialog> /body>
默认情况下,支持的浏览器(Chrome 37+和opera 27+)会以隐藏的形式呈现dialog> 元素,只有调用JavaScript的show()或showModal()方法才可以显现,调用close()方法再次将其隐藏。通常情况下,我们会在一个click事件上执行此方法,如下所示:
VAR $accountDelete = $('#delete-account'), $accountDeleteDialog = $('#confirm-delete'); $accountDelete.on('click', function() { $accountDeleteDialog[0].showModal(); } ); $('#cancel').on('click', function() { $accountDeleteDialog[0].close(); } );
自定义样式:
像大多数其他的元素一样,对话框可以很容易覆盖浏览器的默认样式。所以,你可以自定义其样式。例如,使对话框边框更薄,使边角圆润,并添加阴影效果等。
此外,当dialog> 元素以模态显示时(使用ShowModal()方法),我们会添加一个额外的伪元素::backdrop。::backdrop元素会立即驻留在对话框下面,覆盖整个视区和下方的其它元素。
浏览器支持:
目前,只有 Chrome 和 Safari 6 支持 dialog> 标签。
【相关推荐】
HTML img标签的属性是有哪些?了解IMG标签的用法
HTML5中web是什么?web存储中的元素有哪些?
以上就是HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: HTML5 dialog是什么?怎么使用HTML5中的dialog来实现模拟弹窗?
本文地址: https://pptw.com/jishu/584392.html