BubbleのPopupエレメントを上下中央揃えにする方法

ノーコードツール「Bubble」ではワンクリックでポップアップ（モーダル）エレメントを設置することができ非常に便利。

ですが、デフォルトではポップアップは画面上下中央揃えになっていません。そこでこの記事では、BubbleのPopupエレメントを上下中央揃えにする方法を紹介します。

ひと手間ふた手間加えるだけで実現できるのでぜひお試しください！

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

• 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
• 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
• リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

• 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
• 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
• マーケティングまで支援が可能

実装イメージ

上図の左がデフォルトのPopupエレメントの配置です。

今回紹介する方法を反映すると、上図の右のようにポップアップが上下中央揃えになります！

Bubbleのポップアップを上下中央揃えにする方法

BubbleのPopupエレメントには「Popup」という名前のクラスが付与されているので、そのクラスに対してカスタマイズCSSを当ててやればポップアップを上下中央揃えにすることが可能です。少し強引ですが。。。

画面にHTMLエレメントを設置して以下のCSSを貼り付けてあげるだけで設定完了です。

<style>
.Popup {
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%,-50%);
  right: inherit!important;
}
</style>

上記コードではたしかにポップアップを上下中央揃えに設置できますが、スマホ実機で閲覧したときに最初にガタつきがあるので別のアプローチを現在模索中ではあります。

CSSを使わないアプローチでポップアップエレメントを上下中央揃えにできる方法をご存知の方がいらっしゃいましたらぜひコメント欄で教えてくださいませ！よろしくお願いいたします。