As part of the visual elements for our application, we may want to include popups that open on our page when a button is clicked.
1. Add a popup element to the page
To get started, we can add a popup to our Bubble page by clicking on the “Popup” element in the visual elements panel and dragging it onto our page. Once we have a popup on our page, we can see that, when the popup is selected, the rest of our page is greyed out.
2. Modify the greyout blur settings
If we want to have a lighter color to grey out our page when the popup is open, we can modify this in the Style tab of our editor. We’ll click on the Style for the popup element, and modify the “Greyout color” field. If we want this to be more or less opaque, we can also update the “Greyout blur” option; higher numbers mean a more opaque overlay.
3. Add a button to show the popup
Now, to display our popup to our users, we’ll need to add a button to our page. Once we’ve added a button, we can add a workflow step to Show a Popup, and select our popup that we created in step 1. If we preview this page, we can press the button and see that the popup fades into our page.
By default, clicking outside of the popup will close the popup. We can modify this behavior by checking off the “This popup can’t be closed by pressing ‘Esc’” checkbox in the element’s editor; this will prevent a user from being able to close the popup by clicking back onto the page.
Built on Bubble
