かめ。ブログ

modalはdialogを使えばいい

2023年8月3日
2023年8月3日

目次




modalを作るときは、dialogタグで作ると良さそうです。
いろいろなことを考慮してくれます。

dialogの特徴

  • dialog.showModal();で開く。dialog.close();で閉じる
    • showModalを使った場合
      • aria-modal="true"を考慮してくれる
      • inertの実装はブラウザが提供しているため、気にしなくて良い。
      • escを押したら閉じる
      • :modal 擬似クラスを使える
    • 一方 <dialog> が show() 、または open 属性を使用して表示されたり、<dialog> の既定の display を変更した場合は aria-modal="false" として表示されます。
  • role="dialog"と同じ仕様でブラウザが提供する
  • ::backdropを使って背景色を変更できる。


dialog内のformの特徴

  • <form method="dialog">を使うと良い
    • typeなしの<button>は基本閉じられる、type="button"は閉じないその場合はformmethod="dialog"をつけておいても閉じる。
  • dialog.close();時に、引数に値を渡すとdialogのcloseのeventでdialog.returnValueを取得できる。
  • autofocusなるべく指定しておく
    • 指定しない場合はブラウザ判断で、最初のform要素にfocusされる
  • tabindex 属性を <dialog> 要素で使用してはいけない


ARIA: dialog ロールについて

https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role


引用元: https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

dialogの背景をクリックで閉じるための工夫

  • dialog.getBoundingClientRectを使うことで、modalの領域外を判断して閉じる方法。
  • event.target.closestをつかってnullかどうかを判断して閉じる方法


具体的には下記サイトに記載しています。

参考


modalを開いてる時にstyleを当てる

body:has(dialog:modal)

hasを使うとmodalが開いてるかどうかでstyleを指定できる

:modal 擬似クラスと :has 擬似クラスを使用することで、モーダルが表示されているときにだけスタイルを指定することが可能になります。


使えるブラウザ


参考


まとめ

ブラウザも主要な最新は対応してるので、inertやroleなどの考慮もブラウザ任せにできるので
modal系にはdialogを使っていくのが良いかなと思います。

関連する記事

目次