LoginSignup
28

More than 5 years have passed since last update.

【HTML】dialogでモーダルを作ってみる

Last updated at Posted at 2018-03-16

はじめに

HTML5.2でいろいろ機能が変更されたHTMLのdialogタグ
いろんな使い方があると思いますが、モーダルを作っている人がいたので、真似して作ってみました(みたかった)

DEMO

そもそも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
今後の実装方法など、注目していきたいと思います。

参考

HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ

HTML 5.2で新しく登場した要素で、ダイアログ ボックスを実装する方法と注意点

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28