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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それではEnjoy NoCode!