對話方塊元素 - 簡化視窗

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 平台實驗功能」即可開啟這項功能。