Turn any Bubble popup or floating group into a real window. Draggable Popups & Floating Groups enhances your existing native elements with drag, resize, minimize, expand, and multi-window stacking - without changing a single workflow. Keep all your content, conditions, and actions exactly as you built them. Add one ID attribute and the element transforms into a desktop-style window.
Demo URL: https://stein-plugins.bubbleapps.io/version-test/draggable-popups/1779230200889x386855334685372900Editor URL: https://bubble.io/page?id=stein-plugins&tab=Design&name=draggable-popups&type=page Built for teams that want their Bubble app to feel less like a website and more like a desktop tool. Perfect for CRM-style workflows, admin panels, internal tools, dashboards, order processing, and any app where users need to keep multiple things open and visible at once.
Works With Popups AND Floating Groups Most Bubble apps use both popups and floating groups, and this plugin enhances either one. Whether you built a customer detail as a popup or a side panel as a floating group, just add the ID attribute and it gets the same draggable window treatment. One plugin, both element types.
Why Use This Instead of Native Popups? Bubble's native popups and floating groups work, but they have real limitations:
· Can't be dragged or moved by the user
· Can't be resized
· Can't be minimized to get them out of the way
· Popups lock the page underneath (no multitasking)
· Can't stack multiple with proper focus management
This plugin fixes all of that without forcing you to rebuild anything. Your content stays exactly the same. Your workflows stay exactly the same. Just add an ID attribute and the element gets a header bar, drag handle, resize handles, and window controls automatically.
IMPORTANT: 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 (e.g. three customer cards), use several distinct elements - not multiple copies of the same one.
Features Real Desktop-Window BehaviorEvery enhanced element gets a header bar with drag-to-move, resize handles, minimize, expand-to-fullscreen, and close
· Behaves like a real desktop window, not a static modal
· Click any window to bring it to the front when multiple are open
Bring Your Own Header (Optional)Already designed a custom header inside your popup? Turn off Show Plugin Header and point Drag Handle ID at your own element
· The plugin lifts your header above the popup's scroll area so it stays pinned at the top, then attaches drag, double-click snap-back, and touch double-tap snap-back to it
· Resize handles still appear - you keep your design and only lose the injected title bar
· Toggle Expand, Toggle Minimize, Collapse, and Close All element actions are available to wire your own buttons to the same behavior the chrome offers
Pin a Custom Footer (Optional)Have an action row (Add, Cancel, Save) at the bottom of your popup? Point Footer ID at it and the plugin pins it to the bottom of the window so it stays visible while the body scrolls
· No more scrolling past long forms to find Save - the buttons stay anchored
· Works with or without the plugin header - keep your custom header at the top and your custom action row at the bottom, with a scrollable body in between
· Footer keeps the popup's original spacing so it visually matches the rest of your design
· All your existing workflows on the footer's buttons keep working exactly as before
Works With Popups and Floating GroupsEnhance native Bubble popups or floating groups with the same window chrome
· Mix both element types on the same page
· Identify which elements to enhance by setting an ID Attribute prefix - everything else is left untouched
Multi-Window StackingOpen multiple different windows at once and they cascade-offset so they do not fully overlap
· Click-to-focus brings any window to the top with proper z-index management
· Per-window state for minimized, expanded, and saved geometry
· Works across multiple plugin instances on the same page
IMPORTANT: 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 (e.g. three customer cards), use several distinct elements - not multiple copies of the same one.
Nine Position Presets Control where each window opens via its ID Attribute suffix
·
Center for classic modal positioning ·
Top Left, Top Right, Bottom Left, Bottom Right for corner anchoring
·
Drawer Left and
Drawer Right for side panels docked to the edge
·
Bottom Sheet for mobile-style slide-ups
·
Fullscreen for full-viewport takeovers
Smart DockingDocked presets (drawers, bottom sheet) stay edge-aligned and resize along their docked edge
· Drag a docked window's header to detach it into a free-floating window at your cursor
· Double-click any header to snap the window back to its original preset position
Four Header StylesMatch your app's aesthetic with a built-in header style
·
Standard - neutral light bar with right-aligned controls
·
macOS - traffic-light buttons on the left with a centered title
·
Windows - tall rectangular buttons with a red close-hover
·
Terminal - dark background with neon-green monospace text
Min / Max Size ControlsSet per-instance Minimum and Maximum Width and Height that clamp resize, preset defaults, Fullscreen, and the Expand button
· Setting Max Width = 600 means clicking Expand grows the window to 600px wide centered in the viewport instead of filling the screen
· Expanded and fullscreen windows re-center automatically on viewport resize
· Leave fields at 0 to use the built-in floors and viewport-only ceilings
Content Scaling (Optional)Make popup content grow with the panel instead of leaving empty space when users expand a window
· Fill Width mode scales content up so it fills the panel's width, ideal for fixed-width Bubble popups that users resize larger or fullscreen
· Fit mode letterboxes the whole design into the panel while preserving aspect ratio
· Scaling is up-only, since Bubble's responsive engine already handles narrowing naturally
· Optional list of element IDs (e.g. headers, toolbars, logos) that stay at native size while the rest scales, so anchor UI stays readable
Non-Modal Mode (Click-Through Backdrop)Make the dimmed backdrop click-through so users can interact with the page (and open additional windows) while one is already open
· Perfect for multi-document workflows where modal behavior gets in the way
· Toggle off to keep Bubble's native modal greyout
Close All ManagementWhen two or more windows are open, a Close All button appears in every header
· Closes every open window in one click, across all plugin instances on the page
· Disappears automatically when only one window is left
· Toggle Show Close All Button off to suppress the button entirely if you prefer to drive bulk close from your own workflow
Full Design ControlCustomize header background, text color, corner radius, default width and height, drawer width, and bottom sheet height
· Force a fixed header title or let it derive automatically from the element's ID
· Position-specific styling adjusts automatically for docked windows
Clean Lifecycle IntegrationYour existing Show and Hide workflows continue to work
· The chrome close button publishes the closing window's ID and fires a close-requested event, so you can wire it to Bubble's native Hide and keep internal state perfectly in sync
· Windows hidden externally by your own workflows are detected and torn down automatically
Always-On-Top OverlaysLoading spinners, toasts, and confirmation popups stay above every draggable window regardless of focus order
· Point
Always On Top ID Prefix at any element ID prefix and matching elements are kept above the entire popup stack
· Works with Bubble popups, floating groups, and plain groups - their backdrops are hoisted too so the greyout dims the right thing
· Automatically re-applies whenever a new overlay appears or another popup takes focus
UX DetailsTitle auto-derives from the ID Attribute suffix in Title Case (e.g. draggable-popup-edit-customer shows as "Edit Customer")
· Touch support for mobile drag and resize
· Cannot be dragged fully off-screen
· Resize handles adapt to the position preset
States Exposed·
enhanced_popup_count - how many windows are currently open for this instance
·
total_popup_count - how many windows are open across ALL plugin instances on the page, kept in sync whenever any window opens or closes
·
expanded_popup_ids - comma-separated list of window IDs currently in the expanded (fullscreen) state, across all instances. Use
contains "my-popup" to branch between Expand and Collapse on a single button
·
minimized_popup_ids - comma-separated list of window IDs currently in the minimized (collapsed to header) state, across all instances. Use the same
contains pattern to branch between Minimize and Restore
·
focused_popup_id - the ID of the topmost focused window
·
last_opened_id - the ID of the most recently opened window
·
last_closed_id - the ID of the most recently closed window
·
closing_popup_id - the ID whose close was just requested, for wiring native Hide workflows. For Close All this is a comma-joined list of every closing ID
Events Triggered·
popup_enhanced - fires when a matching element is detected and enhanced
·
popup_close_requested - fires when the user clicks close or Close All, so you can sync Bubble's native Hide
·
popup_closed - fires whenever a window is torn down
·
all_closed - fires when the last window closes
·
popup_focused - fires when a window is brought to front (suppressed when already on top to avoid spam)
Workflow Actions·
Close All Draggable Popups - close every open window across all plugin instances
·
Toggle Expand Draggable Popup - toggles a specific window's expanded state by ID, matching the native chrome Expand button (grows to fullscreen, click again to contract). Auto-restores from minimized first so the transition is visible
·
Toggle Minimize Draggable Popup - toggles a specific window's minimized state by ID, matching the native chrome Minimize button (collapses to the height of the drag handle, click again to restore - including back to an expanded size if that's what it was)
·
Collapse Draggable Popup - directional reset that always returns a window with the given ID to its normal size from either expanded OR minimized. Useful for a single Reset / Restore button