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

Eiji Kitamura

Twitter GitHub Glitch Mastodon

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/ で [EnableExperimental Web Platform features] を有効にします。