UI Component Lab English

← コンポーネント一覧

オーバーレイ

Modal (Dialog) モーダルダイアログ

ページの上に重ねて表示し、閉じるまで背後のページを操作できなくするウィンドウ。

このファイルを削除しますか？

この操作は取り消せません。

別名

見分けるポイント

暗くした背景の上、画面中央に箱が出る。タイトル、本文、「キャンセル」「OK」などのボタンを持つことが多い。

挙動

  • 開くと、フォーカスがダイアログの中に移る。
  • 開いている間は、背後のページをクリックしたり Tab キーで移動したりできない。
  • 閉じると、開くきっかけになった要素にフォーカスが戻る。

キーボード操作

キー動作
Tab / Shift + Tabダイアログ内の要素の間だけを移動する。
Escダイアログを閉じる。

使い分け・注意点

  • 取り消せない操作の確認や、短く完結したメッセージに使う。
  • 利用者の操作なしに開かず、フォーム、ナビゲーションメニュー、完了の通知には使わない。
  • 操作ボタンがないときだけ、別に閉じるボタンを置く。
  • アラート（ノティフィケーションバナー）: アラートダイアログ（モーダルの一種）は応答するまで作業を止め、アラートは作業を中断させずに知らせる。
  • ドロワー: モーダルは画面の中央に出て、ドロワーは端から縦長のパネルとしてすべり出る。
  • ポップオーバー: モーダルは閉じるまでページを操作できず、ポップオーバーは開いたままページを操作でき、外側のクリックで閉じる。

出典