[心得] 新的 <dialog> 元素

楼主: jmlntw (吉米林)   2018-01-17 17:02:14
HTML 5.2 正式引进了 <dialog> 元素,
可以轻松地建立一个盖在网页上的对话框。
先看范例:https://jsfiddle.net/gj2yfrmp/1/
HTML 很简单,一个元素搞定:
<dialog>对话框内容</dialog>
这样就好了。
默认是一个显示在萤幕正中间的黑框对话框,宽度视内容而定。
用 JavaScript 控制对话框:
const dialog = document.querySelector('dialog');
// 开启对话框
dialog.showModal();
// 关闭对话框
dialog.close();
close() 方法可以回传资料。
dialog.close('ok');
dialog.returnValue // 'ok'
用 CSS 装饰对话框:
dialog {
// 对话框本身的样式
}
dialog::backdrop {
// 对话框后面的半透明背景
}
目前主要浏览器只有 Google Chrome 有原生的支援
(https://caniuse.com/#feat=dialog)
其他浏览器需要 Polyfill(https://github.com/GoogleChrome/dialog-polyfill)
作者: Qian1208 (Wizardgreen)   2018-01-17 23:26:00
感谢提供
作者: gin820124   2018-01-18 09:10:00
感谢资讯~
作者: stupidwoman (香蕉)   2018-01-18 10:01:00
谢谢提供情报:)
作者: Kenqr (function(){})()   2018-01-18 11:21:00
感谢提供
作者: jinn (阿昌)   2018-01-19 19:48:00
这范例的测验好准

Links booklink

Contact Us: admin [ a t ] ucptt.com