※ [本文转录自 Web_Design 看板 #1QNn4SQc ]
作者: jmlntw (吉米林) 看板: Web_Design
标题: [心得] 新的 <dialog> 元素
时间: Wed Jan 17 17:02:14 2018
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）