Modal

画面の上にオーバーレイとして表示されるコンテンツを含むボックスです。

Modalは、エンドユーザーの操作を中断してアクションを要求するために使用します。エンドユーザーの注意を重要な情報に向けるために実装します。現在のプロセスを続行するために、エンドユーザーに重要な情報を入力するように要求する場合に最適です。

使用方法

Modalを画面に配置した後、ボタンを使用して新しい画面アクションを呼び出してModalを開きます。ボタンのMethodを「Ajax Submit」に設定し、Toggle Modalアクション（［Logic］タブにあります）を使用します。パターンのパラメータを使用して、オーバーレイの有無、ページ内の位置、開始/終了アニメーションを定義します。なお、ウィジェットのIDを選択するには、ウィジェットの［Name］フィールドに値が入力されている必要があります。

1. Modalパターンをプレビューにドラッグします。
2. コンテンツをプレースホルダで設定します。
3. ButtonウィジェットまたはAjax Submitによるリンクを使用して、Modalパターンを開きます。

4. Destinationプロパティで、Modalをトリガーする新しい画面アクションを作成します。

   

5. 作成したアクション内で、ToggleModalアクションを使用してWidgetIDを設定します。

   

6. 入力パラメータをデフォルト値に変更します。

   

アプリにモーダルを追加する場合、TriggerButtonIdを適切に設定してアクセシビリティがサポートされるようにしてください。これにより、フォーカスとアクセシビリティを適切にサポートすることができます。

モーダルを閉じる方法

ESCキーを押すと、ユーザーはModalウィジェットを閉じることができます。ユーザーがボタンやリンクでモーダルを閉じることができるようにするには、以下の手順を実行します。

1. ボタンまたはリンクをModalウィジェットに追加します。

2. リンク/ボタンのプロパティに移動し、［On Click］セクションで以下の手順を実行します。

   • ［Method］リストで［Ajax Submit］を選択します。
   • ［Destination］リストで、モーダルダイアログを開くために作成したアクションと同じものを選択します。

   既存のアクション内のToggleModalアクションは、モーダルが開いているときはモーダルを閉じ、モーダルが閉じているときはモーダルを開きます。

3. アプリをパブリッシュして、モーダルが適切に閉じることを確認します。

.modal .animate {
    -webkit-animation-duration: 500ms;
            animation-duration: 500ms;
}