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:

600600

Drag and drop a Section on to your view:

588588

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:

470470

Change its background color to #3d1e1e:

476476

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:

474474

Change its background color to #e20000:

482482

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:

580580

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

480480

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

466466

Then, click the + button next to Timed Animations:

478478

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

576576

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:

470470

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

476476

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

478478

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

11101110

Now select your hidden background section in the navigator:

576576

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

476476

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

476476

And then set its Display to Block:

476476

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

10861086

Press Save in the top right:

476476

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:

626626 960960

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):

480480

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

466466

Then, click the + button next to Timed Animations:

478478

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

572572

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

470470

This time, set its y position to 63vh:

470470

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:

576576

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

476476

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

476476

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

468468

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

626626 600600

Did this page help you?