Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

従来のWebアプリにのみ適用されます

 

 

OutSystems

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. アプリをパブリッシュして、モーダルが適切に閉じることを確認します。

入力パラメータ

入力名 説明 必須 デフォルト値
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?