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): jQueryWhat 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): JavaScriptWhat 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, JavaScriptWhat 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): jQueryWhat 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): jQueryWhat 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): jQueryWhat 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): jQueryWhat 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): jQueryWhat we like about it: A very simple jQuery dialog.Link: http://opensource.steffenhollstein.de/templates/modalbox/
Ouibounce
Language(s): JavaScript, CSSWhat 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, CSSWhat 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): CSSWhat we like about it: Customizable modal window with options to add text, photos, and videos.Link: http://drublic.github.io/css-modal/#
Fallr
Language(s): jQueryWhat we like about it: Simple, bare-bones jQuery modal plugin.Link: http://amatyran.com/codecanyon/fallr-js/
SimpleModal
Language(s): jQueryWhat we like about it: Lightweight jQuery plugin that allows customizable CSS.Link: http://www.ericmmartin.com/projects/simplemodal/
jQuery Modal
Language(s): jQueryWhat we like about it: Simple jQuery modal that includes styled login forms and unclosable windows.Link: http://jquerymodal.com
DayPilot.Modal Dialog
Language(s): JavaScriptWhat 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): jQueryWhat we like about it: Basic jQuery dialog for forms, messages, and animations.Link: https://jqueryui.com/dialog/
Nifty Modal Dialog Effects
Language(s): JavaScriptWhat 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): JavaScriptWhat we like about it: Full screen modals with animated transitions.Link: http://joaopereirawd.github.io/animatedModal.js/
jQuery MessageBox
Language(s): jQueryWhat 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, CSSWhat we like about it: Popular popup modal that replaces Javascript’s “alert” Link: http://t4t5.github.io/sweetalert/
Avgrund Modal
Language(s): jQueryWhat we like about it: Nice-looking plugin for jQuery popups and modals.Link: http://labs.voronianski.com/jquery.avgrund.js/
Modal Popups
Language(s): jQueryWhat 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): jQueryWhat we like about it: Super light, bare bones modal dialog window. Link: http://leanmodal.finelysliced.com.au
jQuery Popdown Plugin
Language(s): jQueryWhat we like about it: Clean jQuery modal window that pops down for a change. Link: http://wixel.github.io/jquery-popdown/
Colorbox
Language(s): jQueryWhat we like about it: A jQuery lightbox that’s great for displaying photos. Link: http://www.jacklmoore.com/colorbox/
SSI-modal
Languages: jQueryWhat we like about it: Responsive, mobile-friendly modal Link: http://ssbeefeater.github.io/#ssi-modal
jQuery Modal 1.2.3
Languages: jQueryWhat we like about it: Simple jQuery modal for alerts, prompts, errors, and animations.Link: https://github.com/CreativeDream/jquery.modal
Custombox
Languages: JavaScript, jQueryWhat 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: jQueryWhat 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: jQueryWhat we like about it: Highly customizable modal windows.Link: http://nyromodal.nyrodev.com
fancyBox
Languages: jQueryWhat we like about it: Lightbox alternative, great for images and html content.Link: http://fancybox.net
jqModal
Languages: jQueryWhat we like about it: Super lightweight and flexible modal window.Link: http://jquery.iceburg.net/jqModal/#examples
Zebra Dialog
Languages: jQueryWhat we like about it: Lightweight dialog box with clean-looking default designs. Link: http://stefangabos.ro/jquery/zebra-dialog/
moaModal
Languages: jQueryWhat we like about it: Small, flexible modals. Link: http://sweefty.com/moaModal/
Login Modal
Languages: jQuery, CSSWhat 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: JavaScriptWhat we like about it: Highly customizable JavaScript modal windows. Link: http://sandbox.scriptiny.com/tinybox2/
Rmodal
Languages: JavaScriptWhat we like about it: Simple modal with plain JavaScript (no dependencies), and less than 1.2 KBLink: http://plnkr.co/edit/XXFKwHHcZD4Ecjh8twaW?p=preview
bPopup
Languages: jQueryWhat we like about it: Simple, lightweight jQuery modal popup.Link: http://dinbror.dk/bpopup/
ModalPoplite
Languages: jQueryWhat we like about it: Straight-forward modal popup packed with features.Link: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/
FacyBox
Languages: jQueryWhat 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, CSSWhat we like about it: Shows images, galleries, inline content, and iframed content.Link: http://codylindley.com/thickbox/
ngDialog
Languages: JavaScriptWhat we like about it: Beautiful, clean modals and popups for Angular.js apps.Link: http://likeastore.github.io/ngDialog/#
Bubble Transition
Languages: SwiftWhat 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: jQueryWhat we like about it: A no-frills popup window for jQuery mobile.Link: http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html
Boxy
Languages: jQueryWhat 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: jQueryWhat 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: jQueryWhat we like about it: Nice jQuery popups for alerts, prompts, and confirmations, meant to complement modals.Link: http://trentrichardson.com/Impromptu/
Modaal
Languages: CSS, jQueryWhat we like about it: Accessible and flexible plugin for modal dialog. Link: http://humaan.com/modaal/
Ply
Languages: JavaScriptWhat we like about it: Customizable popup window with multistep options. Link: http://rubaxa.github.io/Ply/
Flipside
Languages: CSSWhat we like about it: A CTA button that turns into a modal window.Link: http://lab.hakim.se/flipside/
jAlert
Languages: jQueryWhat we like about it: Responsive and easy-to-use jQuery popup form. Link: http://flwebsites.biz/jAlert/
jQuery confirm
Languages: jQueryWhat we like about it: A jQuery window with plenty of features.Link: https://craftpip.github.io/jquery-confirm/
Modal Box with CSS
Languages: CSS3, HTML5What 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, jQueryWhat 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, JavaScriptWhat 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, JavaScriptWhat we like about it: Highly customizable modal form for collecting subscribersLink: https://github.com/peachananr/subscribe-better
Angular fancy modal
Languages: CSS, JavaScript, HTMLWhat we like about it: Offers a dozen default options for AngularJSLink: http://vesparny.github.io/angular-fancy-modal/example/
CSS3-Modal
Languages: CSSWhat we like about it: 100% pure CSS modal. Link: https://github.com/cameronbaney/CSS3-Modal
Morphing Modal
Languages: CSSWhat 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, JavaScriptWhat we like about it: Full-screen modals that popup.Link: https://github.com/abhisack/FModal.js
ZFDragableModalTransition
Languages: Objective-CWhat we like about it: Customizable animated modals for mobile. Link: https://github.com/zoonooz/ZFDragableModalTransition
QuestionMark
Languages: JavaScriptWhat 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, CSSWhat we like about it: Small, no-frills modal window. Link: https://github.com/thephuse/vanilla-modal
Tingle
Languages: JavaScriptWhat 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/
