Modal windows: Uses, tips, and 16 open-source plugins to get you started

Modal windows get a bad rap. Clumsy implementation and associations with their evil twin (the dreaded pop-up) plague these plucky UX elements that are meant for vital communication with users, making them feel truly mo-dull and not mo-exciting.

In their most basic form, modal windows are a UI element that appears on top of a product’s main interface so that you can convey a message directly to users that is hard to ignore. When used correctly, designers can do so much with modals: cheery welcome messages, dazzling new feature announcements, and crucial in-app messaging can all be brought to life with modals.

Modals have their drawbacks, too, though. Think of modal windows as being like a tuba. Big and loud—you wouldn’t want one playing all the time. If used too often, modals become background noise that’s quickly dismissed, causing users to mistrust future announcements and miss the valuable information you’ve put there. For maximum effect, modals should be used sparingly and in concert with more subtle UX patterns, like tooltips and slideouts. This way, you’ll create a true symphony of excellent UX design that users trust to help them get more out of your product.

Every product manager needs to know how to use modals properly, so they can build trust with users and get their attention when they need to. With the information in this guide, you’ll have everything you need to implement modal windows in your product, from best use cases, crucial tips to maximize their potential, and even open-source plugins to get started.

Don’t settle for dull or frustrating—use what you learn here to show users that your modals are worthy of their time and not groan-inducing annoyances.

Top 3 modal window uses

Modals are best used for noteworthy announcements and essential information—like welcome messages or can’t-miss updates. Since they aren’t attached to any specific element, they work better for broad in-app messages rather than highly contextual help.

1. User onboarding

Modal windows are often used in onboarding because you want to set the right tone with your new users and because you might need your user’s attention to teach them how to use your product.

For example, Zapier kicks off its onboarding with a cheery welcome banner complete with animated confetti.

‍

This modal establishes Zapier’s fun-loving mood, and it gives users a chance to decide whether they want a guided intro to Zapier or not.

Zapier’s modal works because it’s well-designed and serves a simple purpose, but sometimes you have a little more to say than a single-window can hold. In this case, multi-modal flows can be a great way to onboard new users to your product.

In its onboarding, Grammarly uses a series of modal windows to introduce new users to important features in its product while reiterating the product’s core value propositions.

Each modal window introduces users to a different Grammarly feature, while the progress indicator shows users how close they are to the product tour completion.

2. Feature announcements

Big announcements—like a product redesign or the release of a long-awaited feature—often deserve a big modal splash.

For example, appointment scheduler Calendly used a single, simple modal to announce an exciting new feature (automated follow-up emails).

This kind of modal window can help improve feature adoption rates, a measure of what percentage of your users are actively using your product’s different features. Modal windows can be the tool you use to get people using and loving your new features as soon as possible.

3. Additional user input

Modal windows can also be used for success messages, important alerts, and other things that require additional user input, whether that’s a form or a one-click confirmation. These incidents are worth interrupting a workflow for if they have important consequences—like deleting something, saving progress, making a purchase, etc.

Digital design platform InVision uses a modal to require additional user input before deleting a prototype. This is an important action, and an attention-grabbing UI pattern is useful to prevent accidental data deletion.

Some modals take over a user’s full screen, blocking visibility into your app and focusing a user entirely on the message and user onboarding experience in front of them. We refer to this pattern as a full-screen takeover. On desktop especially, this UI pattern is best reserved for mission-critical information or when there are required inputs that a user must complete before they can perform a specific action.

Tips for getting the most out of your modal windows

So now that you know when to use a modal, it’s worth taking a closer look at what good modal design actually looks like. There’s no one-size-fits-all template, of course, but there are a few rules of thumb worth remembering.

💯 Title

Titles do not need to be catchy or clever to be effective. The modal itself should grab enough attention on its own. Instead, the modal title should tell users with clear language what the modal is all about.

‍Things to remember with titles:

• For user onboarding modals, start with some iteration of “Welcome to {your product} or “Welcome, {first name}.”
• For feature announcements, use words like “Introducing” or “New” to grab the user’s attention.
• Confirmation modals should restate the intended action clearly. For example: “Delete photo?”

🖼 Graphics

One of the biggest advantages of modals over smaller UX elements is that they can easily accommodate visual content. Images can be added under the title or as a hero image for extra emphasis, while short videos or GIFs can help demonstrate how a feature works, provide evidence for an argument, or even just add a little humor.

Things to remember with graphics:

• Use high-quality images or custom-made graphics.
• Think about how you can use an image or GIF to better get information across to users.
• Try to establish a brand identity through your images.

📝 Body text

The body text on your modal needs to clearly and concisely explain what you need to tell people. Make it no longer than it needs to be so people can quickly move on to use your product.

Things to remember with body text:

• Body text can be as long as a few short paragraphs or as short as a sentence, but it should never be longer than it needs to be.
• Run drafts by someone else to make sure your message is clear and unambiguous.
• Use casual, easy-to-understand language when possible. Jargon can be alienating.

🏃 Call-to-action button

Strong, action-oriented language works best for CTAs. While CTAs can be intriguing, don’t be too mysterious. The best ones tell users what comes next in a compelling way.

Things to remember with CTAs:

• Use power words that resonate with users.
• Be clear about what that next step is.
• Support your CTA with your header, body, and images.

🙅 Exit(s)

Don’t hold your users hostage. It should be easy for users to leave the modal window and get back to the main application.

Modals can include an “X,” a close button, or be designed to close if the user clicks outside the modal.

Things to remember with exits:

• Make your exit easy to find.
• Include more than one when it’s necessary.

⏳ Progress bars

When using a series of modals, a progress bar keeps users motivated and lets them know how many more steps are left in the flow. Subtle dots (like the ones Google uses), a simple fraction, or a classic bar can all have a big impact on whether or not people complete a modal series.

Things to remember with progress bars:

• Keep it simple yet obvious, so people can easily see progress without it distracting from the experience.
• Even on only two-page modal flows, it’s worth using a progress bar so that people know how long it’ll take to complete.

Tips for mobile app modals

Modals can be a powerful tool for mobile app engagement, too. Because mobile screens offer limited real estate, the line between mobile modals, slideouts, and even tooltips can get a little blurred—a large tooltip can start to look a lot like a small modal in the palm of your hand.

This can be limiting—every in-app message can feel that much more disruptive on mobile devices—but also open up interesting opportunities for app owners and marketers.

While using a modal window to upsell to a higher tier subscription might feel a little aggressive on desktop, on mobile, it is far more acceptable due to the nature of mobile—we’re just more used to getting interrupted there.

For instance, Duolingo uses a series of playful, animated modals to nudge frequent users toward its premium product. Each modal illustrates another benefit of upgrading, but there is always an easy exit if users aren’t interested at all.

Want to learn more about using mobile modals? Check out these 8 examples of great mobile modals that will delight and engage your app users for the full scoop.

16 open-source modal window plugins

You can build code-free modal windows with Appcues. Not to brag, but our own product is a seriously great way to create gorgeous, customizable modals (and more) that improve user onboarding UX and engagement—all without bugging your dev team.

But we acknowledge that sometimes building in-house makes sense. If you’ve done the math and decided to go the open-source route, here are 16 options to help you out:

1. jQuery Modal

Language(s): jQuery (JavaScript)

‍What we like about it: It’s a basic and accessible jQuery modal. Simple markup makes it easy to style, add fade animations, and attach custom behavior using jQuery events. It’s also super lightweight (only about 1 KB when minified).

2. animatedModal.js

Language(s): jQuery (JavaScript)

‍What we like about it: It has full-screen modals with animated transitions to give your modal windows that extra punch. It also comes with a large library of animation effects and an API for easy customization, so you can make it your own.

3. jBox jQuery Plugin

Language(s): jQuery (JavaScript)

What we like about it: This jQuery plugin is the Simone Biles of modal window plugins: powerful and flexible. It features modal windows, tooltips, and in-app notifications with multiple animations and interaction options to help you score 10/10 with the judges and your users.

‍‍4. SweetAlert2

Language(s): JavaScript, CSS

‍What we like about it: It has beautifully designed pop-up modals that replace JavaScript’s pop-up alerts. These modal windows are fully customizable, responsible, accessible (WAI-ARIA), and come with zero dependencies. It also includes options for AJAX requests, multiple chained modals, custom animation, and right-to-left language support.

5. Modal.js for Bootstrap

Language(s): JavaScript

‍What we like about it: A popular open-source option for creating modal dialogs with lots of flexibility. You can set your modals to open after clicking a button, to fade in, and to even have tooltips appear within the modal window itself. Bonus points for ease of use since, with the markup API, you won’t need to code any JavaScript at all.  

6. Vex dialogs

Language(s): JavaScript, CSS

‍What we like about it: These are clean, modern, and easily customizable modal dialogs. Vex offers multiple themes, animations, overlays, etc., with a simple API for under 7 KB.

7. Responsive Material Design Modals

Language(s): JavaScript, CSS

‍What we like about it: It’s simple, clean, and modern, making it easy to create elegant modals for your product—no jQuery required.

8. Featherlight.js

Language(s): jQuery (JavaScript)

‍What we like about it: It’s lightweight and no-nonsense. This lightbox plugin is for the pro who doesn’t need any hand-holding. And at only 6 KB for 400 lines of JS and 100 of CSS, it’s ready to run with a minimal footprint on all modern browsers.

9. Basic CSS-Only Modal

Language(s): CSS

‍What we like about it: Sometimes you don’t need something complicated and powerful. You just need something simple that works. This modal window plugin does that in spades.

10. iziModal.js

Language(s): jQuery (JavaScript)

‍What we like about it: A larger plugin that offers dozens of sleek animations, tabbed modals (for login/sign-up forms), and great UI/UX effects. It’s fully responsive and customizable, so you can tinker and design to your little heart’s content.

11. Boardal—An Onboarding Modal with Vue.js

Language(s): JavaScript, CSS

‍What we like about it: This one goes out to all of our onboarding fanboys and fangirls. This plugin is purpose-built for user onboarding flows with multiple modals. It includes options for progress indicators, forward/back buttons, scrolling content, and horizontal/vertical transitions between modal content.

12. ARIA modal

Language(s): jQuery (JavaScript)

‍What we like about it: This is a simple, lightweight jQuery plugin designed with accessibility in mind. Plus, it works for all major browsers, devices, and inputs.

13. Morphing Modal

Language(s): CSS, jQuery (JavaScript), Velocity (JavaScript)

‍What we like about it: A sleek, full-screen modal that explodes outward from a CTA button. It’s powered by CSS transition and transformations, jQuery, and Velocity JavaScript.

14. Tingle

Language(s): JavaScript

‍What we like about it: Unfortunate name aside, it’s a great little modal plugin written in pure JavaScript. No dependencies, fully customizable via CSS, and a simple API to boot.

15. Flexbox-based modal

Language(s): CSS, jQuery (JavaScript)

‍What we like about it: These flexbox-based modals are a simple and flexible solution to your modal-creating woes. Plus, animated modal headers and icon menus make these windows stand out from the crowd to really grab the attention of your users.

16. Modaal

Language(s): CSS, jQuery (JavaScript)

‍What we like about it: It’s a modal plugin that is flexible, fully responsive, and accessibility-minded (WCAG 2.0 Level AA, if you’re wondering).

Modal windows are just the beginning

Modal windows are an amazing tool that every product manager should take advantage of. (We wouldn’t have written this article otherwise.) But they’re also only one tool at your disposal. If you’re looking for some open-source tooltips as well, look no further, we’ve got you covered.