Skip to main content

 

パターン

 

 

OutSystems

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. 入力パラメータをデフォルト値に設定します。

入力パラメータ

入力名 説明 必須 デフォルト値
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;
}
  • Was this article helpful?