Fw: [心得] 新的 <dialog> 元素

看板Ajax作者jmlntw (吉米林)時間6年前 (2018/01/17 17:02)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/1

※ [本文轉錄自 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://www.ptt.cc/bbs/Web_Design/M.1516179740.A.6A6.html ※ 發信站: 批踢踢實業坊(ptt.cc) ※ 轉錄者: jmlntw (36.224.27.141), 01/17/2018 17:02:38