bubble

【bubble】超便利!ポップアップ(Popup)の使い方

ノーコーダーのつかさです。

Webサイトを構築していて要所要所で使いたいのがポップアップです。bubbleではポップアップも簡単に実装できるので学習していきましょう!

今回はShowボタンがクリックされた時にポップアップが表示され、Closeボタンがクリックされた時にポップアップが閉じるという処理を実装します。

bubbleって何?という方やノーコードってなんだという方はまずはこちらの記事を参考にしてみてください!

と、その前にアカウントをまだ持ってないという方はこちらからアカウントを作成しましょう。

ポップアップを配置しよう

まずは左側のVisual elementsからButtonを選び適当な場所に配置して、設定画面のAppearanceにShow Popupと入力します。

  1. Buttonを配置
  2. AppearanceにShow Popupと入力

次に同じくVisual elementsからPopupを選びます。今回の要素名はデフォルトのPopup Aで良いでしょう。

  1. Popupを選択すると自動で配置されます。
  2. AppearanceはデフォルトのPopup A

最後に再度Buttonを選び、ポップアップの中に配置します。また今回のAppearanceはCloseにしておきましょう

  1. Buttonをポップアップ内に配置
  2. AppearanceにCloseと入力

これで大枠のデザインは完成しました!

ポップアップを表示させる

ポップアップ外をクリックし、一度ポップアップの設定画面を閉じましょう。その後Show Popupボタンの設定からStart/Edit workflowをクリックします。

ワークフローの設定画面に遷移するので、下記の手順でShow Popupボタンが押された時にポップアップ(Popuup A)を表示するという処理を記述しましょう。

  1. Element Actionsを選択
  2. Showをクリック
  3. Popup Aを選択

これでShow Popupボタンが押された時にポップアップ領域が表示されるようになりました。

ポップアップを非表示にする

続いてCloseボタンが押された時にポップアップ(Popup A)が閉じるという処理を記述しましょう!

デザインに戻ってからCloseボタンのStart/Edit workflowから設定しても良いのですが、せっかくなので今回はWorkflow画面から設定してみましょう。Click here to add an eventから設定を行います。

  1. Click here to add an eventをクリック
  2. Elementsを選択
  3. An element is clickedをクリック
  4. Button Closeを選択

続いてボタンをクリックした時にポップアップを非表示にするという処理を記述します。

  1. Elements Actionsを選択
  2. Hideをクリック
  3. Popup Aを選択

これでボタンを押した時にポップアップが閉じられます。

ここまでできたらPreviewで動作を確認してみましょう!

うまく動作しましたか?ちなみに今回は練習のためにCloseボタンを押した時にポップアップを閉じるという記述も行いましたが、閉じるだけならポップアップ外の場所を適当にクリックしても閉じられます。

まとめ

ポップアップはユーザーのログイン画面でよく使われるイメージがありますので汎用性の高いスキルになります。自然に使えるようにしておきましょう!

それではEnjoy NoCode!

COMMENT

メールアドレスが公開されることはありません。