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

2024年1月24日2024年5月27日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

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

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

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

無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

実装イメージ

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

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

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

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

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

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

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

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！