ダイアログ要素 - モーダルを簡単に

Chrome Canary では、フラグの背後にあるダイアログ要素のサポートが追加されました。dialog 要素は、ウェブページ内のポップアップに使用できます。

  • show(): ダイアログを開く。
  • close(): ダイアログを閉じる。オプションの引数を取ります。引数が存在する場合は、dialog.returnValue に設定されます。
  • showModal(): モーダル ダイアログを開きます。
  • ::backdrop: モーダル ダイアログの背後にある背景のスタイルを設定する疑似要素。
  • close イベント: ダイアログが閉じられたときに呼び出されます。

2013 年 12 月 16 日更新

dialog 要素で以下がサポートされるようになりました。

  • cancel イベント: モーダル ダイアログで Esc キーが押されたときに呼び出されます。このイベントは、event.preventDefault() を使用してキャンセルできます。
  • autofocus 属性: autofocus 属性を持つモーダル ダイアログの最初のフォーム コントロール(存在する場合)は、ダイアログが表示されるとフォーカスされます。該当する要素がない場合は、最初のフォーカス可能な要素がフォーカスされます。
  • form[method="dialog"]: ダイアログ内でのみ有効です。フォームの送信時にダイアログが閉じ、dialog.returnValue が使用された送信ボタンの値に設定されます。

ライブデモとポリフィルで詳細を確認できます

有効にするには、chrome://flags/ で [試験運用版のウェブ プラットフォーム機能を有効にする] を有効にします。