A pop-up dialog is sometimes used to present the user with some important information, to request a confirmation, or even to serve a built-in form that captures their contact information. It might be triggered by a button, or it could be set to appear once the user scrolls to a certain location on the page.
You’re free to design your pop-up however you’d like in Brandcast. In order to create it, you’ll follow a very similar process to creating a full-screen mobile menu.
If you haven’t had a chance to experiment with our Interactions framework, you should probably familiarize yourself with that first.
Overall, the steps you’ll take to build this navigation are:
- Create a full-screen overlay that covers your website, preventing the user from interacting with the site while the dialog is open.
- Create the pop-up dialog itself. Style it, add your content to it, and position it in the center of the screen on top of the overlay. Make sure you add a “close” or “confirm” button of some kind that allows the user to dismiss the dialog.
- When you’re satisfied, hide the overlay and the dialog so that they aren’t visible in their default state. (The simplest way to do this is to use the Positioning Panel to set their z-index to -1.)
- Select the button or element on the page that should open the dialog, and create a new interaction.
- While still in Interaction Mode, reveal the overlay and the dialog (set their z-index to something more than 1.)
- Select the button or element that you want to dismiss the dialog, and add an additional trigger to the interaction. Set the trigger type to “turn off”.
The article below will walk through this process step-by-step.
Create a Full Screen Overlay
When pop-ups appear, it’s common (though not required) for the rest of the site to be “blacked out” slightly. This helps the dialog window pop out visually, and also allows you to prevent the user from interacting with the rest of the site while the dialog is open.
In this example, we’ll add an overlay that darkens and blocks the website behind the pop-up dialog.
First we'll add a new container to any location on the page, give it a partially opaque black background, and adjust its dimensions so that it takes up 100% of the site width and 100% of the browser’s vertical height:
We’ll also absolutely position it to the page, so that it takes over the screen no matter where the user is on the website:
And lastly, we’ll use the Page Structure Panel to give it a name (i.e. "overlay".) This will make it much easier to locate as we are working with it in the future:
Create the Dialog Window
Next we’ll create our pop-up dialog, by dropping a new container within the overlay.
To make sure it’s centered on the screen, we’ll absolutely position it to its parent (the overlay). And we’ll use the vertical-center trick (absolutely positioned 50% from the top, with a -50% translate-Y) to make it sit in the middle of the screen vertically:
Then you’re free to style the dialog window itself however you’d like. You can put text, imagery, whatever you want within it.
You should also make sure that you add some way for the user to dismiss the dialog. In this case, we’ll put a big “OK” button in it:
Hide the Pop-up by Default
Most likely, we don’t want our pop-up to be visible when the user first arrives at the site (although in some cases you might!) In this example, we’ll hide it by default.
First we’ll select the overlay container, then we’ll hide it by setting its z-index to -1, which will essentially move it “behind” the rest of the website:
Note: If your website doesn't have a background color (it's transparent, essentially) you may be able to see your overlay and pop-up dialog "behind" the site. You can solve this by either giving your website a background color in the Global Styles Panel, or by making the overlay 0% opacity while it's hidden with the Filters Panel.
Create the Interaction
Now we’re ready to create the interaction that will open/dismiss the pop-up.
Start by selecting the element on the page that you want to trigger the pop-up dialog. Then open the Interactions Panel and create a new interaction:
While still in Interaction Mode, select your overlay container again. Since it’s currently hidden, you’ll need to use the Page Structure Panel to locate it. Once you’ve done so, bring it back into view by giving it a high z-index (something more than 1, to make sure it sits on top of everything):
One last step: you need to specify what the user can click to close the pop-up. In this case, we’ll select the “OK” button, then add an additional trigger to the Interaction of type “turn off”:
You’re done. Exit Interaction Mode, and switch to Preview Mode to try out your new pop-up dialog!