[Editor’s note: An earlier version of this article listed 67 modal window plugins. That felt like...a lot. We pared down the list to 18 items, because sometimes less really is more.]
Modals are flexible UI elements that sit on top of a product’s main interface, without disrupting users' underlying workflow. Modal windows are great for welcome messages, giving users a high-level introduction to your product during onboarding, new feature announcements, and just about anything else you want to convey through in-app messaging.
Modals are often designed with a layer of transparency behind them, providing a peek of the main screen, but they can also take over the entire screen and command full attention (this is useful for mission-critical things like account deletion). Note that for highly contextual information, product tours, and the like, you may want to consider tooltips instead. To learn more about using modal windows, check out our article on how to use this bold UI pattern correctly.
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 decide to go the open-source route, here are 18 options to help you out:
Language(s): jQuery
What we like about it: Simple, lightweight, accessible jQuery modal. Simple markup makes it easily to style, add fade animations, and attach custom behavior using jQuery events. About 1KB minified.
Language(s): JavaScript
What we like about it: Fullscreen modals with animated transitions. Comes with a large library of animation effects, and an API for customization. Great you're looking to make a big impact.
Language(s): jQuery
What we like about it: A powerful and flexible jQuery plugin that features modal windows, tooltips, and in-app notifications with multiple animation and interaction options.
Language(s): JavaScript, CSS
What we like about it: Beautiful popup modal that replaces Javascript’s popup alerts. Customizable, responsible, accessible (WAI-ARIA) and with zero dependencies. Includes options for AJAX requests, multiple chained modals, custom animation, and right-to-left language support.
Language(s): JavaScript
What we like about it: A popular open-source option for creating modal dialogs. You set modals to open upon clicking a button, turn on/off fade-in animation, use the Bootstrap grid system within a modal, and even have tooltips appear within the modal window itself.
Language(s): CSS, JavaScript
What we like about it: Clean, modern, and easily customizable modal dialogs. Offers multiple themes, animations, overlays, etc. with a simple API for under 7KB.
Language(s): CSS, JavaScript
What we like about it: Clean, modern, responsive modals inspired by Material Design, with nice big buttons and animation—no jQuery required.
Language(s): jQuery
What we like about it: Lightweight, no-nonsense, bare-bones lightbox plugin for the pro who knows what she's doing. Only 400 lines of JS and 100 of CSS—less than 6KB combined
Language(s): CSS
What we like about it: A simple little CSS-only modal based on the :target pseudo-class.
Language(s): jQuery
What we like about it: Unique script that shrinks the entire background screen as the modal window appears. Interesting effect that is best used sparingly.
Language(s): jQuery
What we like about it: A larger plugin that offers dozens of sleek animations, tabbed modals (for login/signup forms), and great UI/UX effects. Fully responsive and customizable.
Language(s): CSS, JavaScript
What we like about it: Purpose-built for user onboarding flows with multiple modals. Includes options for progress indicators, forward/back buttons, scrolling content, and horizontal/vertical transitions between content.
Language(s): jQuery
What we like about it: Simple, lightweight jQuery plugin designed with accessibility in mind. Works for all browsers, devices, and inputs.
Language(s): CSS, jQuery
What we like about it: Very sleek fullscreen modal that opens from a CTA button. Powered by CSS transition and transformations, jQuery, and Velocity JavaScript.
Language(s): JavaScript
What we like about it: Unfortunate name for a great simple modal plugin written in pure JavaScript. No dependencies, fully customizable via CSS, and a simple API.
Language(s): CSS, JavaScript
What we like about it: Simple, responsive, flexbox-based modals with options for passing data attributes to the modals. Animated modal headers and icon menus make these modals stand out.
Language(s): CSS, jQuery
What we like about it: Flexible, fully responsive, WCAG 2.0 Level AA accessible modal plugin. Customizable CSS with SASS options.
Language(s): CSS, JavaScript
What we like about it: Nice little modal with modern styling and animation transitions. The subtle bounce adds a nice touch to a simple, short message.
Psst—Looking for open-source tooltips? We created a list of those, too!
