作者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/m.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