作者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）
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.224.27.141
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1516179740.A.6A6.html
1F：推 Qian1208: 感谢提供 01/17 23:26
2F：推 gin820124: 感谢资讯～ 01/18 09:10
3F：推 stupidwoman: 谢谢提供情报：） 01/18 10:01
4F：推 Kenqr: 感谢提供 01/18 11:21
5F：推 jinn: 这范例的测验好准 01/19 19:48