Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Animated Tabs
Card List
Card Paging
Menu Transition
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Modal Window

Open in Framer to interactPreview this example

In need of some extra attention? Use the Link tool's Modal Window transition to quickly add a popup prompt.

Open in FramerPreview Example

Learn more about modal windows

What is a modal window?

In web and application design, a modal window is a user experience pattern that is often employed to interrupt a user’s activity, drawing their attention to something more important. Sometimes also known as a modal box, a modal dialog, or simply a modal, typically a modal window takes the form of a graphic element that appears in front of all other page content.

A modal window gets its name from the fact that triggering of the window is accompanied by a change in mode. When this happens, areas outside the modal window are deactivated until users either react to instructions that appear within the modal box itself, or close the window.

Modals are usually triggered when a user clicks on a specific element or takes a certain action. However, unlike many other methods of prompting users to respond to alerts, the advantage of a modal window is that the user does not lose their place on the page.

With that said, although the rest of the page remains visible when a modal box appears, typically the background becomes darker – indicating that other page areas have been deactivated. It’s a technique that draws further attention to the modal box, yet offers the advantage that users can still see what is behind the window. This helps to reassure users that they haven’t lost whatever it is they were working on before the modal window appeared.

The opposite of a modal window is a modeless one; in which case a window or box would appear without blocking the main window. While a modeless window will likely be much less invasive for users, it is unlikely to prove as effective as a modal window in attracting user attention.

When to use modal windows?

A modal window is a powerful way of alerting users about important information or prompting them to take a specific action. For example, modal windows are often used in responsive design for delivering warnings, confirmations, drawing the user’s attention to vital information that they may otherwise have overlooked, or for making them aware of any secondary effects their actions may have. Similarly, modals can be used when further information is required before a certain task can be completed - such as when prompting a user to enter their password or other login information.

Shortcomings and best practices

As useful as modal windows can be in grabbing the user’s undivided attention, they are not without their shortcomings. The most obvious of which being the unwelcome interruption of user experience.

Here, though, it’s important to consider what the alternative might be. If the same information or user prompt could be communicated in a less invasive manner, then invariably it would indeed be better to take this other course of action. However, if the only alternative to a modal window would involve the user carrying out an action that is against their own best interests – permanently deleting files, for example – then clearly a modal window would be entirely justified, irrespective of the interruption.

Meanwhile, some argue that due to over-use modal windows are now of only limited effectiveness in getting the user’s attention. To be sure, most users have become accustomed to dismissing annoying popups with little thought. To the degree that many people now automatically click “OK,” “close, or “cancel” without even reading any important information the modal may contain.

Again, the solution here is to not unnecessarily “cry wolf” by using modal windows too frequently - as this will only further desensitize the user to them. Instead try to only employ a modal window when the alternative would cause the user far greater inconvenience.

What’s more, once a modal is activated, it is important to ensure that users are able exit the modal quickly, so as not to disrupt their experience of using your website or app. For this reason most modals have a close button. But it is also good practice to have modals close when the user clicks anywhere outside of the window, as this helps users to feel less “trapped” by the app or page.

How to create a modal window 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, then take the element you want to use to trigger the modal, and connect this to the modal window.

Once this done, go to the interactions section of the properties panel and set the transition type to modal. Now that your transition is set, you can edit the animation of your transition and change the backdrop color. Your modal window is ready to go!

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement