本文へ移動

§10-11Layout

モーダル (重ね)

画面の上に重ねて表示し、操作を集中させる。

元の文脈を残したまま、確認や短い入力に注意を集めたいときに使う。頻繁に開くものや長い作業には向かない。

実装のポイント

フォーカストラップ、Esc で閉じる、背景のスクロール固定、閉じた後のフォーカス復帰をセットで実装する。ネイティブの dialog 要素の showModal でも同等が得られる。

特徴
  • アクセシビリティ
  • キーボード操作
デモで使っているもの
  • shadcn/ui