Learn more about modals
Modals are a commonly used user experience pattern for when you need to interrupt your user’s current task and bring their full attention to something else important, while not losing their place on the page. Modals are usually triggered when a user clicks on a specific element. Once the modal is triggered it is important to ensure that your users can exit the modal quickly, as not to disrupt their experience on your website or app.
Modals often have a close button so people can quickly exit the modal window and, in addition, it is good practice to have modals close when you click outside of the modal window. When the modal dialogue is open, the area behind the modal, or the backdrop, is typically a dark color with a bit of opacity. This allows users to still be able to see what is behind the modal window.
How to create one in Framer
In Framer, creating a modal interaction is quick and easy thanks to the built-in Modal interaction. To set this up, all you need to do is design your modal and modal content, design your home frame and connect the element you want to trigger the modal to the modal window. Then, in the interactions section of the properties panel, set the transition type to modal. Once your transition is set, you can edit the animation of your transition and change the backdrop color.