modal 画面の構築について

TWV2 で使用される modal 画面に関するガイドラインです。modal 画面はセット要素（ se-modal ）として構成されています。

呼出し方式について

modal 画面はセット要素（ se-modal ）として構成されています。呼出し方式は iframe 方式と toggle 方式の２通りがあり、それらの使い分けについては開発側での都合に合わせてください。

iframe 方式

動的にiframeを生成する方式です。生成されたiframeの中身は別テンプレートが読み込まれており、そのテンプレート内で構成を管理しています。

modal 画面内で何らかの処理を行う場合は、こちらの方式を利用するのが良いでしょう。

toggle 方法

表示・非表示を切り替える方式です。同一のテンプレートに予め記述され、その modal 画面を初期表示で非表示とします。そしてトリガーとなるスイッチとの紐付けで、表示するよう制御する方法です。

modal 内で何かアクションを起こすようなケースではなく、特定のアクションを実行した際に表示されるアラートなどに利用するのが良いでしょう。

modal サイズについて

modal 画面の大きさは、横幅を定めるdata-width属性と、縦幅を定めるdata-height属性を使用することで指定することができます。
何も指定しない場合は、それぞれの最小の値が内包される要素に依存し、最大の値は画面サイズいっぱいまでとなります。
＊modal 画面は元画面との差異を表現的にわかり易くするため、16pxの余白を全体にとっています。

値の説明

modal 画面の幅および高さを定めている値とその実際の値です。また modal は共通のルールとして、SP環境（画面幅520px 未満）の場合は、縦横ともに最大幅（calc(100% - 32px)）の値が入ります。

値	数値	補足
small	320px	519px以下
medium	480px	519px以下
large	640px	519px以下
half	表示画面サイズの半分	calc(100% - 32px) / 2
full	表示画面サイズ全体	calc(100% - 32px)
/	分の	には3から10までの、分母を示す整数が入ります。には1から9までの、分子を示す整数が入ります。

modal画面はSP環境（画面幅519px以下）の場合、縦横ともに最大値（ calc(100%) - 32px ）が入ります。これはSPの画面サイズを考慮した共通ルールとして設けています。

画面の階層について

modal 画面の基本構造についての説明です。
modal はheader(se-modalHeader)contents(se-modalContents)footer(se-modalFooter)の３つの階層に分けられます。

header（ se-modalHeader ）

呼出した modal 画面のタイトルや、閉じるためのボタンが入るほか、必要に応じて［戻るボタン］といった、機能的な遷移に関連する要素が入ります。

modalHeader は必須要素となる階層です。

contents（ se-modalContents ）

呼出した modal 画面の主たる内容が入ります。内容の構成ルールについては、ガイドラインに準じてください。

modalContents は必須要素となる階層です。

footer（ se-modalFooter ）

footer は必要に応じて配置され、必須階層ではありません。contents に記述された内容をコントロール（登録や削除、キャンセルなど）を選択するボタンが入ります。

操作手順の省略や、contents 階層内での情報の解決など、内容をコントロールする必要がなければ省いても構いません。