Modals are flexible windows that sit on top of a product’s main window, interacting with users without disrupting their ux flows. Modal windows are great for welcome messages, images, and videos. 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.
You can build code-free modal windows with Appcues. We can wholeheartedly recommend our own product because it’s seriously a great way to create gorgeous, customizable modals (and more) that improve user onboarding ux and engagement. All without bugging your dev team.
If you want to go the open source route, here are 67 options to check out:
JBox jQuery Plugin for Modals
Language(s): jQuery
What we like about it: A powerful and flexible jQuery plugin that features modal windows and tooltips.
Link: http://stephanwagner.me/jBox
Modal.js for Bootstrap
Language(s): JavaScript
What we like about it: One of the most popular open source tools for creating a modal dialog.
Link: http://getbootstrap.com/javascript/
Vex
Language(s): CSS, JavaScript
What we like about it: Easy-to-customize modal dialogs with a clean, modern look.
Link: http://github.hubspot.com/vex/docs/welcome/
Reveal Modal
Language(s): jQuery
What we like about it: Popular and easy-to-use jQuery modal plugin.
Link: http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html
Joyride
Language(s): jQuery
What we like about it: Very popular resource for tooltips and modals.
Link: http://foundation.zurb.com/sites/docs/v/5.5.3/components/joyride.html
Website Tour with jQuery
Language(s): jQuery
What we like about it: Give website tours using modals and tooltips.
Link: http://tympanus.net/codrops/2010/12/21/website-tour/
jQuery TourBus
Language(s): jQuery
What we like about it: Gives you full control of your web walkthrough with modals and tooltips.
Link: http://ryanfunduk.com/jquery-tourbus/
jQuery Plugin "modalBox"
Language(s): jQuery
What we like about it: A very simple jQuery dialog.
Link: http://opensource.steffenhollstein.de/templates/modalbox/
Ouibounce
Language(s): JavaScript, CSS
What we like about it: A small library for creating popup windows upon exit intent.
Link: https://github.com/carlsednaoui/ouibounce
Magnific Popup
Language(s): JavaScript, CSS
What we like about it: A modal popup that users can only leave based on specific actions.
Link: http://dimsemenov.com/plugins/magnific-popup/
CSS Modal
Language(s): CSS
What we like about it: Customizable modal window with options to add text, photos, and videos.
Link: http://drublic.github.io/css-modal/#
SimpleModal
Language(s): jQuery
What we like about it: Lightweight jQuery plugin that allows customizable CSS.
Link: http://www.ericmmartin.com/projects/simplemodal/
jQuery Modal
Language(s): jQuery
What we like about it: Simple jQuery modal that includes styled login forms and unclosable windows.
Link: http://jquerymodal.com
DayPilot.Modal Dialog
Language(s): JavaScript
What we like about it: Simple modal dialog that can display HTML or standalone page.
Link: https://code.daypilot.org/81367/daypilot-modal
jQuery UI
Language(s): jQuery
What we like about it: Basic jQuery dialog for forms, messages, and animations.
Link: https://jqueryui.com/dialog/
Nifty Modal Dialog Effects
Language(s): JavaScript
What we like about it: Experimental and sleek modal designs.
Link: http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/
animatedModal.js
Language(s): JavaScript
What we like about it: Full screen modals with animated transitions.
Link: http://joaopereirawd.github.io/animatedModal.js/
jQuery MessageBox
Language(s): jQuery
What we like about it: Plain and straight-forward modal.
Link: http://gasparesganga.com/labs/jquery-message-box/
Remodal
Language(s): JavaScript, CSS
What we like about it: Responsive and simple modal plugin with declarative configuration and hash tracking.
Link: http://vodkabears.github.io/remodal/#
SweetAlert
Language(s): JavaScript, CSS
What we like about it: Popular popup modal that replaces Javascript’s “alert”.
Link: http://t4t5.github.io/sweetalert/
Avgrund Modal
Language(s): jQuery
What we like about it: Nice-looking plugin for jQuery popups and modals.
Link: http://labs.voronianski.com/jquery.avgrund.js/
Modal Popups
Language(s): jQuery
What we like about it: Simple, lightweight modal popup.
Link: http://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html
Lean Modal
Language(s): jQuery
What we like about it: Super light, bare bones modal dialog window.
Link: http://leanmodal.finelysliced.com.au
jQuery Popdown Plugin
Language(s): jQuery
What we like about it: Clean jQuery modal window that pops down for a change.
Link: http://wixel.github.io/jquery-popdown/
Colorbox
Language(s): jQuery
What we like about it: A jQuery lightbox that’s great for displaying photos.
Link: http://www.jacklmoore.com/colorbox/
SSI-modal
Languages: jQuery
What we like about it: Responsive, mobile-friendly modal
Link: http://ssbeefeater.github.io/#ssi-modal
jQuery Modal 1.2.3
Languages: jQuery
What we like about it: Simple jQuery modal for alerts, prompts, errors, and animations.
Link: https://github.com/CreativeDream/jquery.modal
Custombox
Languages: JavaScript, jQuery
What we like about it: Created with native JavaScript, works with jQuery and has a lot of animated transition options.
Link: http://dixso.github.io/custombox/
BlockUI
Languages: jQuery
What we like about it: Popup jQuery plugin that prevents users from exiting until they perform certain actions.
Link: http://jquery.malsup.com/block/
nyroModal
Languages: jQuery
What we like about it: Highly customizable modal windows.
Link: http://nyromodal.nyrodev.com
fancyBox
Languages: jQuery
What we like about it: Lightbox alternative, great for images and html content.
Link: http://fancybox.net
jqModal
Languages: jQuery
What we like about it: Super lightweight and flexible modal window.
Link: http://jquery.iceburg.net/jqModal/#examples
Zebra Dialog
Languages: jQuery
What we like about it: Lightweight dialog box with clean-looking default designs.
Link: http://stefangabos.ro/jquery/zebra-dialog/
moaModal
Languages: jQuery
What we like about it: Small, flexible modals.
Link: http://sweefty.com/moaModal/
Login Modal
Languages: jQuery, CSS
What we like about it: Login or signin modal dialog window.
Link: http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html
Tinybox 2
Languages: JavaScript
What we like about it: Highly customizable JavaScript modal windows.
Link: http://sandbox.scriptiny.com/tinybox2/
Rmodal
Languages: JavaScript
What we like about it: Simple modal with plain JavaScript (no dependencies), and less than 1.2 KB
Link: http://plnkr.co/edit/XXFKwHHcZD4Ecjh8twaW?p=preview
bPopup
Languages: jQuery
What we like about it: Simple, lightweight jQuery modal popup.
Link: http://dinbror.dk/bpopup/
ModalPoplite
Languages: jQuery
What we like about it: Straight-forward modal popup packed with features.
Link: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/
FacyBox
Languages: jQuery
What we like about it: Facebook-like, jQuery modals that can display images, divs, or remote pages.
Link: http://bitbonsai.com/facybox/
ThickBox
Languages: JavaScript, jQuery, CSS
What we like about it: Shows images, galleries, inline content, and iframed content.
Link: http://codylindley.com/thickbox/
ngDialog
Languages: JavaScript
What we like about it: Beautiful, clean modals and popups for Angular.js apps.
Link: http://likeastore.github.io/ngDialog/#
Bubble Transition
Languages: Swift
What we like about it: Gorgeous bubble transition modal for mobile apps.
Link: https://github.com/andreamazz/BubbleTransition
Noty
Languages: JQueryWhat we like about it: Pretty and colorful jQuery popup windows that can be easily positioned.Link: http://ned.im/noty/#/about
SimpleDialog
Languages: jQuery
What we like about it: A no-frills popup window for jQuery mobile.
Link: http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html
Boxy
Languages: jQuery
What we like about it: Clean, Facebook-like modal dialog for a variety of functions.
Link: http://onehackoranother.com/projects/jquery/boxy/tests.html#
Popup Dialog Windows
Languages: jQuery
What we like about it: Simple jQuery modal popups that interact with users.
Link: http://www.ezzylearning.com/tutorial/creating-popup-dialog-windows-using-jquery
jQuery Impromptu
Languages: jQuery
What we like about it: Nice jQuery popups for alerts, prompts, and confirmations, meant to complement modals.
Link: http://trentrichardson.com/Impromptu/
Modaal
Languages: CSS, jQuery
What we like about it: Accessible and flexible plugin for modal dialog.
Link: http://humaan.com/modaal/
Ply
Languages: JavaScript
What we like about it: Customizable popup window with multistep options.
Link: http://rubaxa.github.io/Ply/
Flipside
Languages: CSS
What we like about it: A CTA button that turns into a modal window.
Link: http://lab.hakim.se/flipside/
jAlert
Languages: jQuery
What we like about it: Responsive and easy-to-use jQuery popup form.
Link: http://flwebsites.biz/jAlert/
jQuery confirm
Languages: jQuery
What we like about it: A jQuery window with plenty of features.
Link: https://craftpip.github.io/jquery-confirm/
Modal Box with CSS
Languages: CSS3, HTML5
What we like about it: Nice-looking HTML popup.
Link: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
iZiMODAL
Languages: CSS, jQuery
What we like about it: Elegant and lightweight jQuery window.
Link: http://izimodal.marcelodolce.com
Backbone.Modal
Languages: CSS, JavaScript, HTML
What we like about it: Comes with default behaviors and interaction, built for Backbone.JS.
Link: http://awkward.github.io/backbone.modal/
Popdevelop
Languages: CSS, JavaScript
What we like about it: Sleek full-screen modal with animation, built with Bootstrap.
Link: http://popdevelop.com/2014/07/sexy-splash-modal-using-bootstrap-css3-and-angularjs/
Subscribe Better
Languages: CSS, JavaScript
What we like about it: Highly customizable modal form for collecting subscribers
Link: https://github.com/peachananr/subscribe-better
Angular fancy modal
Languages: CSS, JavaScript, HTML
What we like about it: Offers a dozen default options for AngularJS
Link: http://vesparny.github.io/angular-fancy-modal/example/
CSS3-Modal
Languages: CSS
What we like about it: 100% pure CSS modal.
Link: https://github.com/cameronbaney/CSS3-Modal
Morphing Modal
Languages: CSS
What we like about it: Very sleek full-screen modal window that opens from a CTA button.
Link: https://github.com/CodyHouse/morphing-modal-window
FModal
Languages: CSS, JavaScript
What we like about it: Full-screen modals that popup.
Link: https://github.com/abhisack/FModal.js
ZFDragableModalTransition
Languages: Objective-C
What we like about it: Customizable animated modals for mobile.
Link: https://github.com/zoonooz/ZFDragableModalTransition
QuestionMark
Languages: JavaScript
What we like about it: Modal window pops up when user hits the question mark key.
Link: https://www.impressivewebs.com/demo-files/question-mark-js/
Vanilla Modal
Languages: JavaScript, CSS
What we like about it: Small, no-frills modal window.
Link: https://github.com/thephuse/vanilla-modal
Tingle
Languages: JavaScript
What we like about it: Pure JavaScript modal that looks minimalistic and clean.
Link: http://robinparisi.github.io/tingle/
jsPanel
Languages: jQuery
What we like about it: A customizable jQuery plugin for modals and tooltips.
Link: http://jspanel.de/v2.6.2/
Want to become a User Onboarding Master? Enroll in our free User Onboarding Academy today!
