作者jmlntw (吉米林)
看板Ajax
标题Fw: [心得] 新的 <dialog> 元素
时间Wed Jan 17 17:02:38 2018
※ [本文转录自 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）
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.224.27.141
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1516179740.A.6A6.html
※ 发信站: 批踢踢实业坊(ptt.cc)
※ 转录者: jmlntw (36.224.27.141), 01/17/2018 17:02:38
1F：推 WunoW: thx 01/18 09:32