HTML5のDialog要素を試してみた

ダイアログ要素やモーダルウィンドウを容易に使えるdialog要素を試してみた。
dialog要素を使うことで、ダイアログの要素をdom内に埋め込むので、cssなどで容易にスタイリング出来るという嬉しいもの。
ちなみに、dialog要素のサポート状況はこちらの通り。

ごくごく単純に以下のようにdialog 要素のshow()、close() APIを使うだけで簡単にダイアログを表示をできる。
show()に対してhide()ではなく、close()を呼ぶあたりが面白い。

See the Pen gbbNqz by — (@kazu69) on CodePen.

モーダルウィンドウを表示する場合は、showModal() APIを使えば良い。
また、モーダルウィンドウの背景要素にスタイルを付ける場合は、::backdrop擬似要素を使うことで実現できる。
dialog要素にスタイルを付けることで、モーダルウィンドウにスタイルを付けることができる。

See the Pen dPPBrz by — (@kazu69) on CodePen.

dialog要素でformのメソッドにdialogを指定することで、フォームとダイアログ、モーダルウィンドウを連携することができる。
モーダルウィンドウのボタンを押すとモーダルウィンドウが閉じられ、入力値またはボタンの値をdialog要素のreturnValueにセットすることができる。

See the Pen dialog tag sample by — (@kazu69) on CodePen.

ちなみに、polyfillはchrome/dialog-polyfill。

参考にしたページ: MDN、dialog element: Modals made easy