dialog要素 Sample

dialog要素が提供するAPIと属性

ダイアログを表示するための show() メソッド
モーダルダイアログを表示するための showModal() メソッド
- showModal() は、フォーカス制御などが含まれたモーダルダイアログ
ダイアログを閉じる close() メソッド
- close() メソッドでダイアログを閉じる際に引数として渡した値が格納される returnValue プロパティ
ダイアログの状態を表す open 属性
- open 属性を直接触るのはNG
  - 直接 open 属性を変更すると、 close イベントが発行されなかったり、エスケープキーでダイアログが閉じれなくなったり、 showModal() で背景部分が操作できないままになったり
- show() showModal() close() を使うことで、自動的に open 属性の付け外しが行われる

モーダルダイアログと`form` 要素の `method="dialog"`

dialog 要素の ::backdrop 疑似要素にstyle指定を当てることにより、背景部分にCSS指定を適用できる
form 要素の method="dialog" を使用して、ダイアログを閉じる際に値を受け取る
- submit 時にリクエストを送信せずにダイアログを閉じることができる
- button要素など、 submit を指定した要素に value 属性がある場合は、その value 属性の値が dialog 要素の returnValue に渡される

dialog要素から受け取った値:

ダイアログ表示時のアニメーション

ブラウザの初期スタイルでは、 dialog 要素の open 属性の有無に応じて、display: none; と display: block; を切り替え流刑式でダイアログの表示/非表示を制御しているため、単純にCSSアニメーションを当てることはできない
dialog 要素の display 指定を明示的に行い、アニメーションに影響が出ないようにする
- CSSで、 open 属性が付いていない dialog 要素に display: block; を指定
- dialog 要素に display: none; のstyle属性を付与
- ダイアログを開く処理の最初で、dialog 要素の display のstyle指定を削除し、CSSアニメーションが動くようにする
- ダイアログを閉じる際、閉じるCSSアニメーションが全て終わってから、dialog 要素に display: none; のstyle属性をJavaScriptで付与
対象要素のCSSアニメーションが全て完了してから実行
- Element.getAnimations() メソッドで、この要素に影響を与えるか将来的に影響を与える予定のすべての Animation オブジェクトの配列を取得
- Animation.finished プロパティは、アニメーションが終了した際に resolve する Promise なので、 Promise.allSettled() に渡せば、アニメーションが全て完了したタイミングが分かる
ユーザーの設定に応じてアニメーションが表示されるようにする
- 各OSの設定で、「視差効果を減らす」ような設定があるため、この設定が有効な場合はアニメーションしないようにする
- macOSの場合、設定アプリの「アクセシビリティ」> 「ディスプレイ」の画面に、「視差効果を減らす」の設定欄がある
- ChromeのDevToolsの場合は、「レンダリング」画面の中にある「CSS メディア特性 prefers-reduced-motion をエミュレートする」の部分で、設定をエミュレート可能
- CSSメディアクエリで @media (prefers-reduced-motion: no-preference) を指定すると、「視差効果を減らす」設定が有効ではない場合にだけ適用することが可能

dialog要素から受け取った値:

ダイアログの枠外クリックで閉じる

dialog 要素自体に click イベントを登録し、 event.target === event.currentTarget の場合は枠外クリックとなる
dialog 要素に初期で当たっている padding が残っていると、この padding 部分をクリックしても閉じてしまう
- CSS指定で dialog 要素を 0 にする
- ダイアログ内の余白が無くなってしまうため、dialog 要素直下に要素を追加し、そこに余白を当てる

dialog要素から受け取った値:

dialog要素 Sample

dialog要素が提供するAPIと属性

`show()` メソッドでダイアログ表示

`showModal()` メソッドでモーダルダイアログを表示

モーダルダイアログと`form` 要素の `method="dialog"`

`form` 要素の `method="dialog"`

ダイアログ表示時のアニメーション

ダイアログの枠外クリックで閉じる

dialog要素が提供するAPIと属性

show() メソッドでダイアログ表示

showModal() メソッドでモーダルダイアログを表示

モーダルダイアログとform 要素の method="dialog"

ダイアログ表示時のアニメーション

ダイアログの枠外クリックで閉じる

`show()` メソッドでダイアログ表示

`showModal()` メソッドでモーダルダイアログを表示

モーダルダイアログと`form` 要素の `method="dialog"`