對話方塊元素 - 簡化視窗

Chrome Canary 現已支援使用旗標背後的對話方塊元素dialog 元素可用於網頁的彈出式視窗。

  • show():開啟對話方塊。
  • close():關閉對話方塊。取用 dialog.returnValue 設為選用引數。
  • showModal():開啟互動視窗對話方塊。
  • ::backdrop:用於設定強制回應對話方塊後方背景的虛擬元素。
  • close 事件:在對話方塊關閉時觸發。

2013 年 12 月 16 日更新

dialog 元素現在支援:

  • cancel 事件:在強制回應對話方塊中按下 Escape 鍵時觸發。您可以使用 event.preventDefault() 取消這項活動。
  • autofocus 屬性:強制回應對話方塊中的第一個表單控制項 (如有 autofocus 屬性) 會在對話方塊顯示時聚焦。如果沒有這類元素,系統會聚焦在第一個可聚焦元素。
  • form[method="dialog"]:僅在對話方塊內有效。提交表單後,系統會關閉對話方塊,並將 dialog.returnValue 設為使用的提交按鈕值。

透過現場示範和 polyfill 瞭解詳情

請前往 chrome://flags/ 啟用 [啟用實驗性 Web Platform 功能],