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 TIME Sites. 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:

The article below will walk through this process step-by-step.
​

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:

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:

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.

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!