[心得] 新的 <dialog> 元素

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

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

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

01/17 23:26, 6年前 , 1^F

01/17 23:26, 1^F

推

gin820124

01/18 09:10, 6年前 , 2^F

01/18 09:10, 2^F

推

stupidwoman

01/18 10:01, 6年前 , 3^F

01/18 10:01, 3^F