MARKETPLACE
PLUGINS
DRAGGABLE POPUP & FLOATING GROUPS
Draggable Popup & Floating Groups logo

Draggable Popup & Floating Groups

Published May 2026
   •    Updated this week

Plugin details

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

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

Min / Max Size Controls
Set 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 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
· Toggle Show Close All Button off to suppress the button entirely if you prefer to drive bulk close from your own workflow

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

Always-On-Top Overlays
Loading 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 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
· 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

$29

One time  •  Or  $4/mo

stars   •   0 ratings
5 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Stein & Company logo
Stein & Company
Joined 2020   •   9 Plugins
View contributor profile

Instructions

Step 1 - Add the Plugin Element Drop one Draggable Popups & Floating Groups element on your page, or place it once inside a reusable header for app-wide availability. The element is invisible at runtime - the window chrome is injected directly onto your popups and floating groups, so where you place the element does not matter.

Step 2 - Mark Elements to Enhance
Open any native popup or floating group you want to enhance. In its element inspector, set the ID Attribute to a value starting with draggable-popup. Examples: draggable-popup-customer, draggable-popup-shipping, draggable-popup-notes. Any element with this prefix is automatically detected and enhanced when it opens. Elements without the prefix stay untouched.

Step 3 - Choose a Position Preset (Optional)
Add a position suffix to the ID Attribute to control where the window opens. For example, draggable-popup-drawer-right for a right-side drawer, draggable-popup-bottom-sheet for a mobile-style bottom sheet, draggable-popup-fullscreen for a full-viewport takeover. Available suffixes: center, top-left, top-right, bottom-left, bottom-right, drawer-left, drawer-right, bottom-sheet, fullscreen. If you skip the suffix or use an unrecognized one (like draggable-popup-edit-customer), the window opens in your configured Default Position and the suffix becomes the header title.

Step 4 - Pick a Header Style and Styling
Choose a Header Style - Standard, macOS, Windows, or Terminal - to match your app's look. Configure Header Background, Header Text Color, and Panel Corner Radius. Set Default Width and Default Height for centered and corner positions, Drawer Width for side drawers, and Bottom Sheet Height (in vh) for bottom sheets. Optionally set a fixed Header Title, or leave it blank to derive titles from each element's ID.

Step 5 - Set Min / Max Size Bounds (Optional)
Use Minimum Width, Maximum Width, Minimum Height, and Maximum Height to cap how small or large windows can get. These bounds clamp every place a size is applied: the resize handles, preset defaults, Fullscreen, and the Expand chrome button. Leave at 0 to use the built-in floors and the viewport as the only ceiling.

Step 6 - Configure Modal Behavior
The Non-Modal toggle controls whether the backdrop blocks clicks. Leave it on (default) for multi-window workflows where users need to keep working on the page while windows are open. Turn it off to restore Bubble's native modal greyout. Use Show Close All Button to hide the multi-close button if you'd rather drive bulk close from your own workflow.

Step 7 - Bring Your Own Header (Optional)
If your popup already has its own header design and you want to keep that look, turn Show Plugin Header off. Then add an ID Attribute to the element inside your popup that should act as the drag bar (e.g. my-popup-header) and put that same ID in the plugin's Drag Handle ID field. The plugin pins your header above the scroll area and attaches drag, double-click snap-back, and touch double-tap snap-back to it. Resize handles still appear. Wire your own close button to a Hide popup workflow, and use the Toggle Expand, Toggle Minimize, Collapse, and Close All element actions on your own buttons to reproduce the chrome behavior.

Step 8 - Pin a Custom Footer (Optional)
If your popup has an action row at the bottom - Add, Cancel, Save - and you want those buttons to stay visible while the body scrolls, add an ID Attribute to that row (e.g. my-popup-footer) and put the same ID in the plugin's Footer ID field. The plugin pins the row to the bottom of the window so it stays anchored no matter how tall the body grows. Works with both the plugin header and a custom header. The footer keeps the popup's original padding around it so it visually matches the rest of your design.

Step 9 - Wire the Close Workflow (Recommended)
The chrome close button and Close All publish the closing window's ID to the closing_popup_id state and fire the popup_close_requested event, then hide the element. To keep Bubble's internal open/closed state perfectly in sync, create a workflow on the popup_close_requested event with a Hide popup (or hide floating group) action for each of your elements, conditional on closing_popup_id contains the matching ID. Without this, the window still hides visually but Bubble may think it is still open. (Skip this step when using your own header - your custom close button calls Hide popup directly.)

Step 10 - Open and Manage Windows
Use your existing Show workflow actions exactly as before. The plugin detects the element opening, injects the chrome (or hoists your custom header), and applies the position preset. Open multiple windows and they cascade-offset automatically with click-to-focus. Drag a docked window's header to detach it into a free-floating window; double-click any header to snap it back to its preset.

Step 11 - Read States and Drive Actions
Reference the exposed states in conditions and workflows. Branch toggle buttons off expanded_popup_ids contains "my-popup" or minimized_popup_ids contains "my-popup" so a single button can both expand and collapse. Use total_popup_count for a global open-window counter regardless of which plugin element owns each window. Call Close All for a bulk close, or Toggle Expand / Toggle Minimize / Collapse for per-window control.

Tips & Best Practices

Always wire the close workflow - The chrome close button and Close All do not call Bubble's native Hide directly. They fire popup_close_requested with the ID in closing_popup_id. Wire that event to a Hide popup workflow so Bubble's internal state never drifts and windows reopen cleanly. This is the single most important setup step. (Custom-header mode skips this - you wire your own button to Hide popup directly.)

Multiple plugin instances are supported - Drop one element per element type or per ID prefix if you need separate header styles, default positions, min/max bounds, or event wiring. Instances coordinate z-index via a shared counter, total_popup_count is kept in sync across all of them, and Close All sees every window across all instances. Use distinct ID prefixes per instance when you need per-window workflows.

Existing workflows stay intact - Your Show and Hide workflows all continue to work. The plugin only adds window chrome on top of Bubble's native lifecycle. A window hidden by your own Hide workflow is detected and torn down automatically.

ID Attribute matching is prefix-based - Any suffix is allowed. Use the suffix as a human label like draggable-popup-edit-customer and it shows up in the header as "Edit Customer." You are not limited to a fixed list - name your windows whatever makes sense.

Toggle vs Collapse - Toggle Expand and Toggle Minimize mirror the chrome buttons (click to apply, click again to undo) - perfect for replacing chrome buttons inside your own header. Collapse is directional - it always normalizes to "normal size" regardless of current state, perfect for an explicit Reset or Restore button.

Min / Max sizing applies everywhere - Setting Max Width = 600 means Fullscreen and Expand cap at 600px wide centered in the viewport rather than filling the screen. The bounds clamp resize handles, preset defaults, Fullscreen, and the Expand chrome button. Expanded windows re-center on viewport resize.

Show Plugin Header and Drag Handle ID are read at open time - Changing these fields at runtime does not retroactively re-chrome already-open windows. Close and reopen the window to apply the new setting.

Footer ID is read at open time - Like Drag Handle ID, the Footer ID is applied when a window opens. Changing it at runtime does not retroactively re-pin already-open windows - close and reopen to apply. Also keep in mind the bottom-right corner of the footer is the resize grab area, so design your action row with the right corner empty (Cancel-left, Save-center-right works well).

Reusable header placement - The plugin watches the entire document, so it works regardless of where the element sits. Drop it in a reusable header once and every page that includes the header gets enhancement automatically.

Snap-back and detach - Docked windows (drawers, bottom sheet) stay edge-aligned until the user drags the header, which detaches them into free-floating windows. Double-clicking the header snaps any window back to its original preset. Great for users who want to temporarily pull a drawer into the center.

Mobile considerations - Drag and resize work via touch, but resizing on a small phone screen is rough UX. Consider using Bottom Sheet or Fullscreen presets on mobile breakpoints for a more native feel.

Performance - 5 to 10 windows perform well. 20+ simultaneously is supported but may slow the page since each window retains its full Bubble content and workflows. Use Close All to clean up.

Content scaling is for fixed-width popups - The scaling feature shines when your popup has a designed width (e.g. 480px) and you want it to fill the panel cleanly when users resize it bigger. If your popup is fully responsive and already adapts to its container, leave Scale Mode set to None - Bubble's own layout will handle the fit better than visual zoom.

Always On Top works with any element type - Bubble popups get their backdrop hoisted along with them so the greyout dims the right thing. Floating groups and plain groups (no backdrop) just get their z-index bumped above the popup stack. Use a short distinctive prefix (e.g. spinner or toast) and put it at the START of the element's ID Attribute.

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Technical   •   Productivity   •   Containers   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble