[Plugin] Draggable Popups & Floating Groups: Make your existing elements draggable and stackable ↔️

The wait is over! Starting today with Draggable Popups & Floating Groups your users can now move, stack and position your pop ups and floating groups to their liking! No more being locked into one specific spot or tailoring your design around rigid pop ups.

Here are a few of the enhancements for your existing pop ups and floating groups you can find by installing this plugin.

1. They can now be moved. Drag any popup or floating group around the screen by its header, resize it, minimize it, expand it to fullscreen. They behave like real desktop windows instead of static boxes locked in place.

2. You can interact with multiple native popups open at the same time. Bubble normally lets one popup take over the screen. With this, you can open a customer card, a shipping panel, and a notes window all at once. Each is draggable, resizable, and stacked with click-to-focus.

3. You can interact with the page behind a popup without closing it. Native popups lock everything underneath. This makes the backdrop click-through, so your users can keep scrolling, clicking, and working on the page while popups float above it.

And it works with the popups and floating groups you already built. Add one ID attribute, no rebuilding.

First 5 commenters get it free! :wrapped_gift: Just drop a comment to claim.


Links


What it does

Works with popups AND floating groups. Whether you built something as a popup or a floating group, add the ID attribute and it gets the same window treatment. One plugin, both element types.

Real desktop-window feel. Drag by the header, resize from the corner or edge, minimize to just the header, expand to fullscreen. Click any window to bring it to the front. Behaves like a window on your computer, not a static modal.

Nine position presets. Set where each window opens via its ID Attribute suffix: Center, four corners, Left/Right Drawer, Bottom Sheet, or Fullscreen. Perfect for side references, mobile-style sheets, and full takeovers.

Non-modal mode. Make the backdrop click-through so users can keep working on the page (and open more windows) while one is open. This is the big one. Native popups lock the page, these don’t.

Smart docking. Drag a docked drawer’s header to detach it into a free-floating window. Double-click any header to snap it back to its preset.

Four header styles. Standard, macOS (traffic lights), Windows, or Terminal (neon-green monospace) to match your app’s look.


How it works

  1. Drop one plugin element on your page (or in a reusable header)
  2. Set any popup or floating group’s ID Attribute to start with draggable-popup
  3. That’s it. It gets enhanced automatically when it opens

Add a position suffix like draggable-popup-drawer-right or draggable-popup-bottom-sheet to control where it lands. The suffix also becomes the window title in Title Case, so draggable-popup-edit-customer shows as “Edit Customer.”


FAQ

Does it work with Bubble’s new responsive engine?
Yes, fully compatible.

Does it work on mobile?
Yes, with touch support for drag and resize. For phones, the Bottom Sheet and Fullscreen presets feel most natural.

Do I have to rebuild my popups?
No. Keep your existing popups, floating groups, content, and workflows exactly as they are. Just add the ID attribute. The plugin adds window chrome on top, it never replaces Bubble’s native lifecycle.

Can I open the same popup multiple times at once?
No. Because this enhances native Bubble elements, you can have one instance of each popup or floating group open at a time. To show several at once (like three customer cards), use several distinct elements, not copies of the same one.

How does closing work?
The close button fires a popup_close_requested event with the popup’s ID. Wire it to a Hide popup action, the same way you’d close any popup in Bubble, so the internal state stays in sync. Standard Bubble practice.

I have a question or found a bug. How do I reach you?
Leave a comment on this thread or reach out directly and I’ll get back to you fast.


Let me know what you think and what you’d like to see added next!

Attaching here a quick demo, this page is using only bubble’s native pop up and floating group elements.

Draggable Popups Demo

v1.02 - Content Scaling
New optional Scale Mode setting that scales popup and floating group content UP to match the panel size. Perfect for fixed-width popups that previously left empty space when users resized them larger or hit fullscreen.

Pick Fill Width to stretch content to the panel’s width, or Fit to letterbox the full design while preserving aspect ratio.

Optional list of unscaled element IDs lets headers, toolbars, or logos stay at native size while the rest scales. Off by default - existing setups are unchanged.

Dude, this plugin is awsome :clap:!
Thanks fot it!

I’ll definitely install it by the end of this week and come back here to share my impressions.

No problem, I agree! There are so many possibilities for it in new and existing apps.

I just added the ability for you to use your own pop up header so you no longer need to use the native one

I agree with the other comment…

this seems like a pretty cool tool that can be used on a lot of sites.

Good job making this :slightly_smiling_face:

Thank you! That means a lot. Finally trying to fix some of those nagging issues that have popped up over the years.

v1.13.0 Mark Floating Header and Footer on Popups/Floating Groups

As a natural evolution of this plugin that started as just a way to drag popups, it not unlocked another form!

You can now manually set via HTML id a header or footer for your pop up which will remain at the top/bottom of the element and when it is expanded.

Perfect for tricky Add/Close bottom footer buttons or my favorite, the tedious bubble chat buildout! :grin: