A popup is a container that appears above the rest of the page and is centered on the screen, regardless of how far the user has scrolled. Popups can dim or blur the content behind them, which makes them well suited to grabbing the user's attention with a message, form, or focused action.

Common uses include:

Popups sit in a special layer above the rest of the page. They're always centered horizontally and stay in place as the user scrolls, giving them a consistent, focused appearance regardless of the page's state.

By default, popups dim the page behind them, drawing attention to the popup itself. You can adjust this behavior through the popup's properties, including changing the color of the overlay, adjusting its opacity, or applying a blur effect. Users can typically dismiss a popup by clicking outside of it, though this behavior can be turned off if the popup requires an explicit action to close.

Because popups are their own container, they can hold any elements you'd place in a regular group, including forms, images, buttons, and even other containers.

Popups can hold a data source, just like a regular group. This makes it easy to open a popup with a specific piece of data loaded, such as an "edit user" popup that receives the user being edited.

There are two common patterns:

The popup loads its data as soon as it's shown, based on an expression like Current User.

Use the Display data in a group or popup action to load a specific item into the popup at the moment it opens. This is the more flexible pattern, since it lets the popup receive different data based on which button was clicked.

Once the data is loaded, child elements inside the popup can reference it with expressions like Parent group's User's name.

To clear the data in a popup, you can use the Reset a group/popup action. Note that this resets the data back to its original data source. If the data source is empty, it will reset to an empty value. If the data source is not empty, it will reset to the original item.

Popups are never visible on page load and can't be shown using conditions. Instead, they're controlled by workflow actions:

For popups that need to open with specific data, use Display data in a group just before Show an element in the same workflow, so the data is ready before the popup appears.

Adding a popup to a page gives you two extra events you can use to trigger workflows:

Both events trigger every time the popup opens or closes, not just the first time. This makes them useful for setting up or cleaning up state around the popup.

Common uses include:

You can have as many popups on a page as you need. Only one is typically visible at a time, though. Showing a second popup while the first is open can lead to confusing overlaps, so it's usually better to close the first popup before opening the next one.

Popups can be styled like any other container. The overlay behind the popup can also be customized, giving you control over how much of the page is visible when the popup is open.

Using shared styles or style variables keeps popups consistent with the rest of your app's design.

Article series: Styles

Popups are a visual layer, not a security boundary. The elements behind a popup are still fully present in the page's client-side code, and a curious user can inspect the page to see them. Dimming or blurring the background is a UI effect only.

Never rely on a popup to hide sensitive information. Use privacy rules in the database and server-side conditions to control what data actually reaches the client.

A common pattern is to use a popup as a login/signup screen that appears if the current user is logged out. This approach should be used with care:

Generally, we recommend using dedicated pages for login and signup, and redirecting logged-out users to those pages. That said, always assume a user can reach any page, regardless of your setup. This is why privacy rules and server-side conditions matter no matter which method you choose.