[心得] 新的 <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