Modal

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

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

使用方法

Modalを画面に配置した後、ボタンを使用して新しい画面アクションを呼び出してModalを開きます。ボタンのMethodを「Ajax Submit」に設定し、Toggle Modalアクション（［Logic］タブにあります）を使用します。パターンのパラメータを使用して、オーバーレイの有無、ページ内の位置、開始/終了アニメーションを定義します。

1. Modalパターンをプレビューにドラッグします。

2. コンテンツをプレースホルダで設定します。

3. ButtonウィジェットまたはAjax Submitによるリンクを使用して、Modalパターンを開きます。

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

   

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

   

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

   

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