はじめに
HTML5.2でいろいろ機能が変更されたHTMLのdialog タグ
いろんな使い方があると思いますが、モーダルを作っている人がいたので、真似して作ってみました(みたかった)
そもそもdialogって？
dialog要素は閲覧者が操作可能なダイアログを表す。
open属性を指定すれば、dialogが初期状態で表示される。
操作はJavaScriptで行う。
※ブラウザによっては、正しく表示されないかもしれません。
<dialog open>
hogehoge
</dialog>
See the Pen dialog_sample by kizuku sengoku (@sengoku) on CodePen.
今回やってみたもの
See the Pen dialog_modal by kizuku sengoku (@sengoku) on CodePen.
HTML
<dialog>の中に書いていきます。特に指定するものはないと思います。
CSS
::backdrop を指定することによって、dialogを表示した「背景」のスタイルを指定する擬似クラス
js
-
dialog.showModal()やdialog.close()など、dialog要素を表示するメソッドが存在する -
dialog.returnValue
dialog.close()の引数に値を渡すと、returnValueにセットされる
その他formとの連携も簡単にできそう。
まとめ
正しい使い方なのかはわからないですが、モーダルを簡単に実装できそうでビビりました。HTML5.2で新機能が追加されたdialog
今後の実装方法など、注目していきたいと思います。