モーダルを開くボタンの作成

デモエクスペリエンスを作成して空白ページを追加したら、必要に応じてページバリアントを編集できます。このデモでは、ボタンとモーダルを作成し、モーダルを開くボタンを構成できます。

始める前に

必要なロール：ui_builder_admin

手順

1. デモエクスペリエンスの UI ビルダーページを開きます。

   図 : 1. UI ビルダー ビジュアルエディター

   

2. ステージ上の [+ コンテンツを追加] ボタンをクリックしてツールボックスを開きます。
3. [1 列] のレイアウトを選択します。
4. 次に、列の [+] アイコンをクリックしてツールボックスを開きます。
5. ボタンコンポーネントを選択してステージに追加します。

   図 : 2. ボタンの追加

   

   注:

   コンポーネントを選択すると、[ページ構成] ペインには、互換性のあるページでコンポーネントを自動的に構成するために使用できるプリセットがいくつか表示されます。ただし、この演習では、コンポーネントを手動で構成します。プリセットの詳細については、「コンポーネントを使用した UI ビルダー ページのカスタマイズ」を参照してください。
6. [Add (追加)] を選択します。
7. [ページ構成] ペインで、[コンポーネントを手動構成します] を選択します。
8. [ページのコンテンツ] ペインで [ボタン 1] を選択し、[構成] ペインでボタンラベルを [モーダルを開く] に変更します。
9. [保存] を選択します。
10. [ページのコンテンツ] ペインで、[モーダル] の横にある [プラス] アイコンをクリックし、[アラート] モーダルを選択します。

    図 : 3. アラートモーダルの追加

    

11. [保存] を選択します。
12. [ページのコンテンツ] ペインで [ボタン 1] を選択し、[構成] ペインで [イベント] タブを選択します。
13. [+ イベントハンドラーを追加] を選択し、[継承されたイベントハンドラー (Inherited event handlers)] で [モーダルダイアログを開くまたは閉じる] を選択します。

    図 : 4. モーダル構成の表示/非表示

    

14. [モーダルダイアログを開く] をアクティブにし、[モーダル ] フィールドで [アラート 1 ] を選択し、[追加] を選択します。
15. [保存] を選択します。
16. [プレビュー] を選択します。
17. プレビューが開いたら、[モーダルを開く] を選択します。
    定義したモーダルが開きます。

    図 : 5. ボタンでモーダルを開く

    

18. モーダルで [了解] を選択し、ブラウザーの戻るボタンを選択してエクスペリエンスのメイン画面に戻ります。

次のタスク

テンプレートを使用してページを作成する方法については、「次のトピック (Next topic)」リンクを選択してください。