モーダル/ポップアップウィンドウの作成方法
ポップアップウィンドウを作成したいですか？ ページリンクとアクションを活用して、画像ビューア、確認画面、情報ポップアップ、ヒントなどに最適なモーダル画面を作成しましょう。
スキルレベル: 初心者
始める前に
画面とコンポーネントおよびアクションの基本を知っていることを確認してください
この機能を使用するには有料の Adalo プランは必要ありません
アプリに少なくとも1つの画面があることを確認してください
その画面にアクションを追加するためのコンポーネントがあることを確認してください
手順
1.) リンク元となるコンポーネントを選択します。クリックアクションエリアでアクションの追加をクリックします。
2.) リンクを選択し、新しい画面を選択します。
3.) 新しいモーダル画面に名前を付け、画面タイプとしてBlankを選択するか、MiscセクションのドロップダウンメニューからModalテンプレート画面を選択します。Modalテンプレートを選択した場合は、ステップ9にスキップします。
4.) 画面の左上隅にある画面タイトルをクリックして、画面全体を選択します。
5.) 画面オプションの一番下にあるスタイルの編集をクリックします。
6.) 背景の色スウォッチをクリックして、カラーピッカーを表示します。
7.) 透明度スライダー 
を使用して、背景の透明度を左にスライドして0に設定します。
8.) 今度は、モーダルとして機能するいくつかのコンポーネントを画面に追加する必要があります。たとえば、四角形、テキスト、いくつかのボタン、Lottie ファイルなどです。このステップのヘルプについては、まずコンポーネントの基本ページを参照してください。
9.) モーダルが望むように見え、読めるようになったら、ステップ2で設定したリンクアクションを編集する必要があります。新しいモーダルにリンクするコンポーネントに戻り、リンクアクションを選択します。トランジションドロップダウンメニューで、トランジションタイプとしてModalを選択してください。
10.) 通常、モーダルにXボタンまたはキャンセルオプションを配置しておくのがベストプラクティスです。これがないと、ユーザーはポップアップを閉じることができません！
11.) 画面の下部にモーダルを表示することもできます。これには、画面の下部に配置し、コンポーネントをグループ化し、グループ内でスタイルの編集をクリックし、FixedセクションでBottomを選択します。
1.) この例では、ユーザーが追加ボタンをクリックして、リストに新しいアイテムを追加できるように、ポップアップモーダルに移動することを望んでいます。リンク元となるコンポーネントを選択します。クリックアクションエリアでアクションの追加をクリックします。リンクを選択し、新しい画面を選択します。
2.) 新しいモーダル画面に名前を付け、画面タイプとしてBlankを選択するか、MiscセクションのドロップダウンメニューからModalテンプレート画面を選択します。Modalテンプレートを選択した場合は、ステップ9にスキップします。
3.) ブランク画面オプションを選択した場合は、画面の左上隅にある画面タイトルをクリックして、画面全体を選択します。
4.) 画面オプションの一番下にある Edit Styles をクリックします。
5.) Background カラースワッチをクリックして、カラーピッカーを表示します。透明度スライダー を使用して、背景の透明度を左端までスライドして 0 に設定します。
6.) 今、ポップアップ自体として機能する四角形が必要です。右上の大きなプラス記号をクリックして 
、次に Simple をクリックして Rectangle を画面にドラッグします。このステップのヘルプについては、最初に Component Basics ページをよく読んでください。スタイルや色をお好みに変更できます。
7.) 画面を作成する際に Modal テンプレートを選択した場合は、四角形をダブルクリックしてグループに入り、その後ボタンとテキストを削除してください。
8.) 今度は、ポップアップモーダルにアイテムを作成するフォームを追加しましょう。フォーム についての詳細はこちらをクリックしてください。
9.) ユーザーがアイテムを作成した後にホーム画面にリンクされるように、フォームにも戻るアクションを追加することを忘れないでください！フォームの設定で Submit Button ドロップダウンセクションをクリックし、Link アクションを追加して <-Back にリンクするようにします。
10.) モーダルが望むように見え、読めるようになったら、Step 2 で設定したリンクアクションを編集する必要があります。新しいモーダルにリンクするコンポーネントに戻り、Link アクションを選択します。Transition ドロップダウンで、トランジションタイプとして Modal を選択することを忘れないでください。
11.) 通常、モーダルには X ボタンまたは Cancel オプションを追加しておくのがベストプラクティスです。これがないと、ユーザーはポップアップを閉じることができません！
例
これで、誰かがコンポーネントをクリックするといつでもポップアップウィンドウが表示されます！この手順で使用されるアプリをクローンしたりテストしたりするには、こちらをクリックしてください。 たくさんのモーダルの例をご覧になりたい場合は、Modals cloneable kitをチェックしてください！
もっと詳しく知る
モーダル/ポップアップを適用するさまざまな方法があります。画像ギャラリー、情報ポップアップ、Lottieアニメーションを使用した確認、ヒントなどに使用できます。アプリに直接コピーできる素晴らしいモーダルの例をいくつかご紹介します。Modals cloneable kitをクローンしてください！
他のモーダルとの間でモーダルをリンクする際は注意してください。これにより、データのループやユーザーが前に進めない画面フローが作成されることがあります。モーダルは、「行って戻ってくる」タイプの画面フローで最も効果的に機能します。ユーザーがモーダルに移動し、何かを行い（作成、更新、削除、キャンセルなど）、元の画面に戻される場合です。例外は、ユーザーが長い画面フローを完了し、成功画面が表示され、Homeなどにリンクされる確認画面の場合です。
Last updated
Was this helpful?