Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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で新しく登場した要素で、ダイアログ ボックスを実装する方法と注意点

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした