[心得] 新的 <dialog> 元素

[jmlntw (吉米林)]

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://www.ptt.cc/bbs/Web_Design/M.1516179740.A.6A6.html
推 Qian1208: 感謝提供
推 gin820124: 感謝資訊～
推 stupidwoman: 謝謝提供情報：）
推 Kenqr: 感謝提供
推 jinn: 這範例的測驗好準