Popup

The Popup element controls a popup document’s container, child layout, overlay, animations, and close behavior. Select Popup in Structure to edit these controls.

For the content-building workflow, see Building Your Popup in Breakdance. Targeting, triggers, and display limits belong to Popup Settings.

Popup Design

Under Design > Popup:

• Position > Align — Left, Center, Right; Vertical Align — Top, Middle, Bottom; Translate > X / Y — offsets.
• Background — Solid color or gradient.
• Size > Width / Height / Max Height — Dimensions and height limit.
• Padding — Shared or per-side inset.
• Borders > Radius / Styling / Shadow — Corners, border style/width/color, shadow.

Layout

• Vertical: Align, Vertical Align, Gap stack/alignment/spacing.
• Horizontal: Align, Vertical Align, Gap; Vertical At stacks at a breakpoint; Alignment When Vertical aligns that stack.
• Grid: Items Per Row, Space Between Items; Advanced > Item Vertical Alignment / Item Horizontal Alignment; Use Original Item Dimensions prevents stretching.
• Advanced > Display > Flex: Flex Direction, Align Items, Justify Content, Flex Wrap, Align Content, Gap, Row Gap, Text Align. Alignment follows the main/cross axes; Align Content distributes wrapped lines.
• Advanced > Display > Grid: Grid shorthand, Grid Template explicit tracks/areas, Gap, Row Gap, Justify Items / Align Items within cells, Justify Content / Align Content within the container, Grid Auto Columns / Grid Auto Rows implicit tracks, Grid Auto Flow (Row, Column, Row Dense, Column Dense), Text Align.

Older Layout controls retain Align, Vertical Align, Gap, and Horizontal > Align / Vertical Align / Vertical At.

Animation

Configure Entrance and Exit under Animation. Animation Type: Fade; Slide Up/Down/Left/Right; Flip Up/Down/Left/Right; Zoom In/Out. Selecting a type exposes Duration, Delay, and Ease: Linear or In/Out/InOut variants of Expo, Power1–4, Back, Elastic, Bounce.

Overlay and Close Button

Design > Overlay provides Color (including transparency), Clip (border-box, padding-box, content-box), and Layers:

• Type: Image, Gradient, Overlay Color, None.
• Image, Size (Custom Width / Height), Repeat, Attachment (scroll/fixed), Position (Custom Left / Top).
• Gradient, Overlay Color, Blend Mode.

Design > Close Button: Color and Size; Wrapped exposes Background, Padding, Radius. Color/background support hover. Also Custom Icon, Position (Top/Middle/Bottom Right or Left), Outside, Translate > X / Y.

Scrolling and Closing

Under Content > Popup:

• Disable Overlay — Remove background; does not allow page scrolling.
• Allow Scroll — Allow underlying page scrolling.
• Disable Close Button — Hide the button; Escape/outside clicks still close.
• Show Close Button After — Milliseconds before showing an enabled button. The timer starts at initialization, not opening; leave unset for delayed click/scroll popups because expiration while closed can leave the button hidden.
• Popup Can't Be Closed — Available with the button disabled; blocks Escape/outside clicks. Explicit Close actions and automatic closing still work.
• Automatically Close After — Milliseconds after opening.

Advanced > Popup HTML ID (without #) and Popup CSS Class target the inner container. Keep Open On Hashlink Clicks prevents default closing on #/same-page anchors. Custom buttons can use a Popup Close action.

Opening and closing actions run on the front end; requests during an animation may be ignored. See Opening and Closing Popups with Links.