Modal Window

Learn more about modal windows

What is a modal dialog?

In web and application design, a popup 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 popup box, a modal dialog, a modal page, 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.

Modal implementation in HTML, CSS or Javascript

Modal windows can take the form of HTML modal popups, or they can be made with CSS or Javascript. (jQuery modal windows are also not uncommon.)

Modals are usually triggered when a user clicks on a specific modal HTML or CSS 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 dialog 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 non modal window which appears 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.

Simply put, when you want to stop your user from doing anything else unless they respond to a prompt, you can use a modal window. If you just want to notify your user of an update or needed task without interrupting the user experience, use a non modal prompt. An example of a non modal element aside from a pop up is a dropdown menu or a side panel.

When to use modal popups?

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.

Generally, you want to use modal windows in the following scenarios:

• Important warnings and critical errors. Use modal popups to interrupt the user’s progress when critical damage to app function or their own work would happen if they don’t address the problem immediately.
• When the user has to input crucial data. If a process requires information or input from the user to proceed, a modal window comes in handy to grab their attention and encourage them to enter said data.
• Break down complicated processes into easy to understand steps. Rather than overwhelming the user with every step of a convoluted process at once, you can use a series of modal windows to structure the user experience into one task at a time. This can make it more intuitive and easier for the user overall.
• Get information that will make further steps easier. If you need certain types of user info to make further steps down the line more feasible or streamlined, you can use modal windows to get that information earlier in the process. This way, the rest of the process takes less work and fewer steps.

Shortcomings and best practices for modal windows

As useful as modal screens 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 is 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!