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/1779230200889x386855334685372900
Editor 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 Behavior
Every 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

Works With Popups and Floating Groups
Enhance 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 Stacking
Open 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 Docking
Docked 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 Styles
Match 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

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 Management
When 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

Full Design Control
Customize 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 Integration
Your 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

UX Details
Title 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
· 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

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

Element Actions
· Close All - close every open window across all plugin instances