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.