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