Popup element (web)
This section covers the container type Popup, which is a group that hovers above all other elements on the screen
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:
Error messages and alerts
Registration and login forms
Contact and feedback forms
Newsletter signup prompts
Promotional offers and discounts
Confirmation dialogs before destructive actions
How popups behave
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.
Loading data into a popup
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:
Set the data source directly
The popup loads its data as soon as it's shown, based on an expression like Current User.
Push data with a workflow
Push data with a workflow. 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.
Resetting data in a popup
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.
Showing and hiding popups
Popups are never visible on page load and can't be shown using conditions. Instead, they're controlled by workflow actions:
Show an element displays the popup with a subtle fade-in animation.
Hide an element closes the popup with a matching fade-out.
Animate an element displays or hides the popup with a specific animation, such as sliding in from the side or scaling up from the center.
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.
Popup events
Adding a popup to a page gives you two extra events you can use to trigger workflows:
A popup is opened runs each time the popup is shown, whether through Show an element or Animate an element.
A popup is closed runs each time the popup is hidden.
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:
Resetting input fields after the popup closes, so they're empty the next time it opens.
Preloading data when the popup opens.
Logging analytics events tied to popup interactions.
Using multiple popups
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.
Styling popups
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 and security
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.
Using popups as login/signup screens
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:
Make sure all database data is protected by privacy rules
Assume that the user can hide the popup and see what's underneath, even if you use a background color and/or blur.
Assume that if the user logs out, data they had access to before logging out is still loaded and visible
All sensitive events and actions should be protected with server-side conditions
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.
FAQ: Popups
Other ways to learn
Last updated
Was this helpful?