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

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/ で [Enable experimental Web Platform features] を有効にするとオンになります。