Popup

Use Popup to build dialogs, popovers, and flyouts that overlay page content with configurable triggers, scheduling, and dismiss behavior.

Usage

The Popup module renders a container using the HTML Popover API, creating a dialog, popover, or flyout that appears over page content. You add any Beaver Builder content inside it — text, images, forms, or other modules — and control when it opens through automatic triggers such as a time delay, scroll depth, or exit intent, or by linking an anchor element or Invoker Command to its Popup ID.

Use the Popup module to build newsletter opt-ins, promotional overlays, confirmation dialogs, video players, or side drawers that appear at the right moment in the visitor's session.

note

The Popup module relies on the HTML Popover API, which is supported in all current major browsers. Visitors using significantly outdated browser versions may not see the popup correctly.

Module Settings

The Popup module settings control the popup ID, automatic trigger behavior, active dates, dismiss options, and visual appearance.

General Tab

The General tab sets the popup ID, trigger conditions, scheduling dates, and how visitors dismiss the popup.

Trigger

The Trigger section sets the popup ID and controls when the popup opens automatically.

Trigger Settings

Popup ID

Sets a custom ID for the popup element. Use this ID to open the popup with an anchor link (for example, #my-popup-id) or with an Invoker Command. The ID must be unique and must not contain spaces. When left empty, a unique ID is generated automatically.

note

If you leave this field empty, Beaver Builder generates an ID automatically using the format fl-popup- followed by a unique string it assigns to each module instance, for example fl-popup-3a8f21bc. Because the generated ID is not predictable, set a custom ID whenever you need to open this popup from a button, link, or other element.

Show On

Selects when the popup appears automatically. Multiple options can be active at the same time. When no options are selected, the popup only opens when triggered directly via its ID.

• Delay: Opens the popup after the set number of seconds. Setting the delay to 0 shows the popup as soon as the page loads.
• Scroll: Opens the popup when the visitor has scrolled the set percentage of the page. Values of 0% have no effect — the scroll trigger only activates for values above 0%.
• Exit: Opens the popup when the visitor moves their cursor toward the top of the browser window, which typically indicates they are about to switch tabs or navigate away. The exit trigger fires once per page load.

When multiple triggers are selected, the popup opens as soon as any one condition is met. The remaining triggers do not fire after the popup has already been shown.

Automatic Trigger Settings

Show Delay (Delay Only) Default: 0

Sets the number of seconds to wait before showing the popup. This field appears when Show On includes Delay.

Show on Percent Scrolled (Scroll Only) Default: 0

Sets the percentage of the page the visitor must scroll before the popup appears. This field appears when Show On includes Scroll.

Show Once Default: Disabled

Prevents the popup from appearing again after it has already been shown. This field appears when any automatic trigger is active.

• Per User: Shows the popup once and sets a browser cookie to prevent it appearing again. The popup can reappear if the visitor clears their cookies or visits from a different browser or device.
• Per Session: Shows the popup once per browser session using session storage. The session clears when the visitor closes the tab or browser window, so the popup may appear again on their next visit.
• Disabled: Shows the popup every time the trigger condition is met, on every page load.

Schedule

The Schedule section limits when the popup is active based on date.

Schedule Settings

Show Start Date Supports: Field Connections

Sets the date from which the popup begins displaying. Leave empty to show the popup immediately.

Show End Date Supports: Field Connections

Sets the date after which the popup stops displaying. Leave empty to show the popup indefinitely.

Dismiss

The Dismiss section controls how visitors close the popup.

Dismiss Settings

Close on ESC/Click Outside Default: Disabled

Enables or disables closing the popup by pressing the Escape key or clicking outside the popup container.

• Enabled: Closes the popup when the visitor presses Escape or clicks outside the popup.
• Disabled: Keeps the popup open unless the visitor uses the close button or another dismiss action.

Close Button Default: Enabled

Shows or hides the built-in close button inside the popup.

• Enabled: Renders a close button inside the popup.
• Disabled: Removes the close button from the popup.

Loop Options

The Loop Options section controls navigation between popup instances when the Popup is placed inside a Loop module.

Loop Options Settings

Loop Navigation Arrows Default: Enabled

Shows or hides the previous and next navigation arrows that let visitors move between popup instances rendered by a Loop module. When enabled, the arrows can be styled in the Loop Navigation Arrows section on the Style tab.

• Enabled: Renders the loop navigation arrows.
• Disabled: Removes the loop navigation arrows.

Style Tab

The Style tab controls the popup's position, dimensions, background, border, close button appearance, and loop navigation arrows.

Sizing & Placement

The Sizing & Placement section sets where the popup appears on the screen and its dimensions.

Sizing & Placement Settings

Position Default: Center

Sets where the popup appears on the screen.

• Center: Centers the popup on both axes.
• Center Left: Centers the popup vertically on the left edge.
• Center Right: Centers the popup vertically on the right edge.
• Top Left: Places the popup in the top-left corner.
• Top Center: Centers the popup horizontally at the top.
• Top Right: Places the popup in the top-right corner.
• Bottom Left: Places the popup in the bottom-left corner.
• Bottom Center: Centers the popup horizontally at the bottom.
• Bottom Right: Places the popup in the bottom-right corner.

Width & Height Default: 500px, 100%, & 200px; Supports: Responsive

Sets the width, max-width, min-height, height, max-height, and min-width of the popup container. Defaults to a width of 500px, a max-width of 100%, and a min-height of 200px.

Padding Supports: Responsive, Link Values

Sets the inner spacing of the popup container.

Appearance

The Appearance section controls the popup background, backdrop overlay, and border.

Appearance Settings

Background settings

Background settings control background type, color, image, gradient, overlay, and related responsive background options where available.

Backdrop Default: rgba(171, 183, 196, 0.3); Supports: Responsive

Sets the background style of the overlay layer shown behind the popup.

Border settings

Border settings control border style, width, color, radius, and related responsive border controls where available.

Close Button

The Close Button section controls the appearance of the built-in close button. These settings apply when Close Button is set to Enabled in the General tab.

Close Button Settings

Button Type Default: Icon

Sets whether the close button displays an icon or a text label.

• Icon: Renders the close button as an icon.
• Text: Renders the close button as a text label.

Icon Settings

Button Icon Supports: Field Connections

Sets the icon used for the close button when Button Type is set to Icon. When left empty, a default × icon is used.

Text Settings

Button Text Default: Close

Sets the text label used for the close button when Button Type is set to Text.

Button Attachment Default: Popup; Supports: Responsive

Controls whether the close button is positioned relative to the popup container or the browser window.

• Popup: Positions the close button relative to the popup container.
• Window: Positions the close button relative to the browser window, keeping it visible even when the popup is taller than the viewport.

Button Position Supports: Responsive, Link Values

Sets the top, right, bottom, and left offset of the close button. Defaults to −45px from the top and right edges.

Button Padding Supports: Responsive, Link Values

Sets the inner spacing of the close button. Defaults to 5px on all sides.

Button Size Default: 40; Supports: Responsive

Sets the width and height of the close button icon, or the font size when Button Type is set to Text.

Button Color Default: #333333; Supports: Responsive, Field Connections

Sets the icon fill color or text color of the close button.

Button Background Supports: Responsive, Field Connections

Sets the background color of the close button.

Border settings

Border settings control border style, width, color, radius, and related responsive border controls where available.

Loop Navigation Arrows

The Loop Navigation Arrows section styles the previous and next navigation buttons rendered when a Popup is placed inside a Loop module. Each loop item gets its own popup instance. The navigation arrows let visitors move between those popups without closing and reopening each time.

For example, you can build a grid of blog post cards where each card has a "Read more" button that opens the full post content in a popup. Once a popup is open, the previous and next arrows let visitors cycle through the other posts without closing the popup.

tip

When the popup is placed inside a loop, include the current post ID in the Popup ID value, such as my-popup-[wpbb post:id], so each popup instance stays unique.

Loop Navigation Arrow Settings

Horizontal Offset Default: 0; Supports: Responsive

Sets the horizontal distance of the previous and next arrow buttons from the popup edges.

Button Size Default: 42; Supports: Responsive

Sets the width and height of each navigation arrow button.

Icon Color Default: #333333; Supports: Responsive, Field Connections

Sets the icon color of the navigation arrow buttons.

Button Background Supports: Responsive, Field Connections

Sets the background color of the navigation arrow buttons.

Button Border Supports: Responsive

Configures the border style, width, radius, and color of the navigation arrow buttons.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.