Popover Modal

Displaying a Popover

A popover might be useful in your paywall if you'd like to show/hide different products for the user to select and purchase.

Here, you'll create a basic popover view that's animated when you click a button:

Drag and drop a Section on to your view:

This will act as a background view that will only appear when the popup appears. Set Display to none, Width to 100vh, Height to 100vh, Position to Absolute, and z-index to 4:

Change its background color to #3d1e1e:

Then, add another section to the view. Now, set its Width to 100vw and Height to 63vh. Set Position to Fixed, bottom position to -63vh, and z-index to 5:

Change its background color to #e20000:

These settings will give your red popover a height of 63% of the view height, while positioning it hidden off the bottom of the screen.

You now need to wire up a button to present the popover onscreen. Drag a Button on to the screen:

With the button selected, click the Interactions tab, click the + button next to Element trigger and select Mouse click (tap):

Under On 1st click, click the Select an action dropdown and choose Start an animation:

Then, click the + button next to Timed Animations:

This will bring up the animation editor. Name the new animation Popover and hit Enter. In the Navigator, select your popup section:

You have to do this so that when you add an animation, it'll apply it to the selected section when the button is pressed. To add the animation, press the + button next to Actions and select Move:

You'll see an animation timeline appear for your section:

In the Move section, set the y position to -63vh:

This will move your popover back into view. When you hit enter you'll see the popover appear in view:

Now select your hidden background section in the navigator:

Then click the + button next to Actions, and select Hide/Show:

Hold and drag your new animation step on to the previous animation step so that they occur at the same time:

And then set its Display to Block:

In the preview you'll see both the popup view and its background visible:

Press Save in the top right:

You've now added a popup to your view. To check that it works, click the Toggle Preview button in the top left and then click on the button:

Dismissing the popup

Now that you've presented a popup, you'll want a mechanism to dismiss it. You'll do this by adding an animation to the popup background view.

Select the hidden popup background view, then click the Interactions tab, click the + button next to Element trigger and select Mouse click (tap):

Under On 1st click, click the Select an action dropdown and choose Start an animation:

Then, click the + button next to Timed Animations:

This will bring up the animation editor. Name the new animation Dismiss Popover and hit Enter. In the Navigator, select your popup section:

Then, press the + button next to Actions and select Move:

This time, set its y position to 63vh:

This will move the popover view back down out of view when the popover background is clicked. You'll also need to hide the popover background, so now select the popover background in the Navigator:

Then click the + button next to Actions, and select Hide/Show:

Hold and drag your new animation step on to the previous animation step so that they occur at the same time:

And then set its Display to None and click Save in the top right:

And that's it! To check that it works, click the Toggle Preview button in the top left and then click on the button:


Did this page help you?