Modal

オーバーレイで表示されるダイアログコンポーネントです。重要な確認や追加の入力フォームなど、ユーザーの注意を集中させたい場面で使用します。

Basic

jui-modal の最も基本的な使用例です。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
:focus-visible	ダイアログのキーボードフォーカス制御	86+	85+	15.4+	Baseline 2022
CSS 変数 (var())	デザイントークン・カラー適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
:focus-visible	2022年	2024年後半 ✅
CSS 変数	2017年	2020年前半 ✅

関連コンポーネント

• Button — モーダル内のアクションボタンとして使用
• Alert — インラインの通知・警告表示に
• Card — コンテンツをカード形式でまとめる際に

アクセシビリティ

• WAI-ARIA:
  • ルートの対話型要素に role="dialog"、aria-modal="true" が付加されます。
  • タイトルが設定されている場合、ダイアログに aria-labelledby を自動で紐付け、スクリーンリーダーが読み上げられるようにします。
• フォーカストラップと制御:
  • モーダルが開かれた際、モーダル内の最初のフォーカス可能要素（またはダイアログ自身）にフォーカスが自動的に移動します。
  • 開いている間はフォーカスがモーダル外に出ないように制限（フォーカストラップ）され、キーボードユーザーのフォーカス迷子を防ぎます。
  • モーダルが閉じられた際、元のモーダルを開くトリガーとなった要素にフォーカスが自動で復元されます。
• キーボードナビゲーション:
  • Escape キーを押すことでモーダルを閉じることができます。
  • Tab / Shift + Tab キーでモーダル内のフォーカス可能要素を巡回できます。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-z-modal, --jui-color-overlay, --jui-color-background, --jui-radius-lg 等）を参照して描画されます。

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
closeLabel	close-label	閉じるボタンのアクセシビリティラベル（i18n対応）	string	'Close'
closeOnOverlay	close-on-overlay	オーバーレイクリックで閉じるかどうか	boolean	true
hasOverlay	has-overlay	オーバーレイの表示有無	boolean	true
modalTitle	modal-title	モーダルのタイトル	string | undefined	undefined
open	open	モーダルの開閉状態	boolean	false
size	size	モーダルのサイズ	"full" | "lg" | "md" | "sm" | "xl"	'md'

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiClose	モーダルが閉じられた時に発火するイベント	CustomEvent<{ reason: "button" | "escape" | "overlay"; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	モーダル本体（デフォルトスロット）
"footer"	フッター領域

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"body"	本文領域
"close-button"	閉じるボタン
"dialog"	ダイアログコンテナ
"footer"	フッター領域
"header"	ヘッダー領域
"overlay"	オーバーレイ背景
"title"	タイトルテキスト

---

Built with StencilJS