Framer Modal Overlay — A Step-by-Step Guide to Creating a Modal

A Step-by-Step Guide to Creating a Modal in Framer

Modals are interactive elements designed to grab the user's attention and also highlight specific content on a web page, such as newsletter subscription forms, discount forms, or even feedback forms.  

In this tutorial, we'll cover how to create a modal overlay that displays a Feedback form. By the end of this tutorial, we'll have something like this:

When the button is clicked, it will open the overlay like this:

Framer Overlays

Framer provides two types of overlays:

• Fixed

• Relative

Fixed

A fixed overlay stays in a fixed position relative to the viewport. Even if a user scrolls the page, the overlay stays at the same fixed position.

Fixed overlays are great for elements such as:

• Feedback forms

• promotions or special offers

• Newsletter subscriptions

• Alerts and notifications

Relative Overlays

A Relative overlay, on the other hand, is positioned relative to the parent element. A relative overlay moves together with its parent element, and it's therefore suitable for elements such as :

• Drop-down menus

• Tooltips

• Context menus

For this tutorial, we'll use the fixed overlay.

Create a Trigger button.

The first step is to create a button that will trigger the overlay to open. Create a button component and place it at the centre of the page.

The most important step is to attach an event to the primary instance of the button. With the button selected, follow the steps below to add an event to it.

• In the top-right of your framer canvas, click the + icon next to interactions

• Choose a New Event, give it a name (for example, Form), and add the event.

Now, when the button is clicked, it will trigger the event responsible for opening the overlay that displays the feedback form.

Create the Overlay

In Framer, an overlay is a layer that sits on top of your existing content. To add an overlay in Framer, follow the steps below:

• Select the element that will trigger the overlay; in our case, it's the button we created earlier.

• On the right side of the canvas, click the + icon next to overlays and choose Add overlay, > Fixed Overlay.

Once you select the overlay, you can then go ahead and customise the properties.

Let's see a detailed overview of each overlay property.

ShowOn:  The default option is already set to Form (the event we added to the button). This tells Framer to open the overlay when the button is clicked.

Preset: Controls how the overlay appears. Options include Instant, Fade In, Fade Out,e.t.c.

Fill: Allows us to set the background color of the overlay. Since the overlay will fill the entire viewport, we'll set the background color to white.

Dismissable: Controls how the overlay is closed. When set to Yes, the user can close the overlay by clicking anywhere outside the overlay. When set to No, you'll need to add a dedicated close button or action.

For this tutorial, let's set it to No, so we can add a close button manually.

Enter and Exit: These define the transition effects when opening or closing the overlay. We'll use the default settings for now.

Z Index: Determines the stacking of the overlay relative to other elements. It's best to set a higher value(i.e, 10) so it appears above the navigation bar or any other layer.

Page Scroll: Controls the scroll behaviour of the underlying page when the overlay is open.  When set to Auto, the user can scroll, and when set to Block, scrolling of the underlying content will be blocked.

Once you are done customizing, click Done.

Add the Feedback Form to the Overlay Layer

The last step is to add the Feedback form inside the overlay layer. Copy and paste your form onto the overlay layer and align it vertically and horizontally so it's centered within the viewport.

You should now have something like this:

Now, when you preview the overlay, clicking the button will open the overlay and display your feedback form.

Add a Close Button

Right now, we can open the overlay, but we can't close it yet. To fix that, we'll create a close button component and add it to the top right edge of your form element.

By default, every component inside the overlay has access to overlay events. With the close button selected, add a new interaction at the top right and choose the close overlay event.

Now, when you preview the site, clicking the button at the center of the page opens the modal overlay, and clicking the button closes it.

Conclusion

We’ve built a working modal overlay in Framer. Now you can follow the same steps to create any type of overlay, from forms to alerts and more.