Modal
画面の上にオーバーレイとして表示されるコンテンツを含むボックスです。
Modalは、エンドユーザーの操作を中断してアクションを要求するために使用します。エンドユーザーの注意を重要な情報に向けるために実装します。現在のプロセスを続行するために、エンドユーザーに重要な情報を入力するように要求する場合に最適です。
使用方法
Modalを画面に配置した後、ボタンを使用して新しい画面アクションを呼び出してModalを開きます。ボタンのMethodを「Ajax Submit」に設定し、Toggle Modalアクション([Logic]タブにあります)を使用します。パターンのパラメータを使用して、オーバーレイの有無、ページ内の位置、開始/終了アニメーションを定義します。なお、ウィジェットのIDを選択するには、ウィジェットの[Name]フィールドに値が入力されている必要があります。
- Modalパターンをプレビューにドラッグします。
- コンテンツをプレースホルダで設定します。
- ButtonウィジェットまたはAjax Submitによるリンクを使用して、Modalパターンを開きます。
-
Destinationプロパティで、Modalをトリガーする新しい画面アクションを作成します。
-
作成したアクション内で、ToggleModalアクションを使用してWidgetIDを設定します。
-
入力パラメータをデフォルト値に変更します。
アプリにモーダルを追加する場合、TriggerButtonIdを適切に設定してアクセシビリティがサポートされるようにしてください。これにより、フォーカスとアクセシビリティを適切にサポートすることができます。
モーダルを閉じる方法
ESCキーを押すと、ユーザーはModalウィジェットを閉じることができます。ユーザーがボタンやリンクでモーダルを閉じることができるようにするには、以下の手順を実行します。
- ボタンまたはリンクをModalウィジェットに追加します。
-
リンク/ボタンのプロパティに移動し、[On Click]セクションで以下の手順を実行します。
- [Method]リストで[Ajax Submit]を選択します。
- [Destination]リストで、モーダルダイアログを開くために作成したアクションと同じものを選択します。
既存のアクション内のToggleModalアクションは、モーダルが開いているときはモーダルを閉じ、モーダルが閉じているときはモーダルを開きます。
-
アプリをパブリッシュして、モーダルが適切に閉じることを確認します。
入力パラメータ
入力名 | 説明 | 型 | 必須 | デフォルト値 |
---|---|---|---|---|
Position | 画面上のModalの位置を設定します。 | PositionExtended Identifier | False | Entities.PositionExtended.Center |
HasOverlay | Trueの場合、Modalの背後のオーバーレイが有効になります。 | Boolean | False | True |
EnterAnimation | 開始アニメーションを設定します。 | EnterAnimation Identifier | False | Entities.EnterAnimation.EnterScale |
LeaveAnimation | 終了アニメーションを設定します。 | LeaveAnimation Identifier | False | Entities.LeaveAnimation.LeaveScale |
ExtendedClass | このブロックにカスタムスタイルクラスを追加します。 | Text | False | なし |
レイアウトおよびクラス
高度なユースケース
アニメーションの速度を変更する
カスタムCSSを使用して、Modalのアニメーションの速度を変更することができます。これをアプリケーションに実装するには、CSSをテーマにコピーします。
.modal .animate { -webkit-animation-duration: 500ms; animation-duration: 500ms; }