67 Open Source Modal Window Plugins Made with jQuery, JavaScript, CSS, and more!

.

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

jBox jQuery modal onboarding ux

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

BootstrapJS Modal

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

Vex onboarding ux

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

Reveal_modal.png

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

Joyride modal

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

Codrops_modal.png

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

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"

modalBox.png

Language(s): jQueryWhat we like about it: A very simple jQuery dialog.Link:   http://opensource.steffenhollstein.de/templates/modalbox/

Ouibounce

Ouibounce-modal.png

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

Magnific_Popup.png

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

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

Fallr-modal.png

Language(s): jQueryWhat we like about it: Simple, bare-bones jQuery modal plugin.Link: http://amatyran.com/codecanyon/fallr-js/

SimpleModal

simplemodal.png onboarding ux

Language(s): jQueryWhat we like about it: Lightweight jQuery plugin that allows customizable CSS.Link: http://www.ericmmartin.com/projects/simplemodal/

jQuery Modal

jQuery_Modal.png

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

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

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

Nifty Modal Windows Effect

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

animatedModal

Language(s): JavaScriptWhat we like about it: Full screen modals with animated transitions.Link: http://joaopereirawd.github.io/animatedModal.js/

jQuery MessageBox

jQuery MessageBox

 

Language(s): jQueryWhat we like about it: Plain and straight-forward modal.Link: http://gasparesganga.com/labs/jquery-message-box/

Remodal

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

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

onboarding ux Avgrund_Modal.png

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

Super_Simple_Modal_Popups_with_jQuery_and_CSS3_Transitions.png

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

LeanModal

Language(s): jQueryWhat we like about it: Super light, bare bones modal dialog window. Link: http://leanmodal.finelysliced.com.au

jQuery Popdown Plugin

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

Colorbox.png

Language(s): jQueryWhat we like about it: A jQuery lightbox that’s great for displaying photos. Link: http://www.jacklmoore.com/colorbox/

SSI-modal

ssi-modal.png

Languages:  jQueryWhat we like about it: Responsive, mobile-friendly modal Link: http://ssbeefeater.github.io/#ssi-modal

jQuery Modal 1.2.3

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

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

 

jQuery BlockUI Plugin

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

nyroModal

Languages:  jQueryWhat we like about it: Highly customizable modal windows.Link: http://nyromodal.nyrodev.com

fancyBox

fancyBox.png

Languages:  jQueryWhat we like about it: Lightbox alternative, great for images and html content.Link: http://fancybox.net

jqModal

jqModal

Languages:  jQueryWhat we like about it: Super lightweight and flexible modal window.Link: http://jquery.iceburg.net/jqModal/#examples

Zebra Dialog

Zebra Dialog

Languages:  jQueryWhat we like about it: Lightweight dialog box with clean-looking default designs. Link: http://stefangabos.ro/jquery/zebra-dialog/

moaModal

moamodal

Languages:  jQueryWhat we like about it: Small, flexible modals. Link: http://sweefty.com/moaModal/

Login Modal

Login Modal onboarding ux

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

Tinybox

Languages: JavaScriptWhat we like about it: Highly customizable JavaScript modal windows. Link: http://sandbox.scriptiny.com/tinybox2/

Rmodal

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

bpopup

Languages: jQueryWhat we like about it: Simple, lightweight jQuery modal popup.Link: http://dinbror.dk/bpopup/

ModalPoplite

ModalPoplite

Languages: jQueryWhat we like about it: Straight-forward modal popup packed with features.Link: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/

FacyBox

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

ThickBox.png

 

Languages: JavaScript, jQuery, CSSWhat we like about it: Shows images, galleries, inline content, and iframed content.Link: http://codylindley.com/thickbox/ 

ngDialog

ngDialog

Languages: JavaScriptWhat we like about it: Beautiful, clean modals and popups for Angular.js apps.Link: http://likeastore.github.io/ngDialog/#

Bubble Transition

Bubble

Languages: SwiftWhat we like about it: Gorgeous bubble transition modal for mobile apps.Link: https://github.com/andreamazz/BubbleTransition

Noty

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

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

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

jQuery popup

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

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 

Modaal

Languages: CSS, jQueryWhat we like about it: Accessible and flexible plugin for modal dialog. Link: http://humaan.com/modaal/

Ply

Ply

Languages: JavaScriptWhat we like about it: Customizable popup window with multistep options. Link: http://rubaxa.github.io/Ply/

Flipside

Flipside

Languages: CSSWhat we like about it: A CTA button that turns into a modal window.Link: http://lab.hakim.se/flipside/

jAlert

jAlert

Languages: jQueryWhat we like about it: Responsive and easy-to-use jQuery popup form. Link: http://flwebsites.biz/jAlert/

jQuery confirm

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

modalbox_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

IZIMODAL

Languages: CSS, jQueryWhat we like about it: Elegant and lightweight jQuery window.Link: http://izimodal.marcelodolce.com

Backbone.Modal

Backbone

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

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

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

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

CSS3 Modal onboarding ux

Languages: CSSWhat we like about it: 100% pure CSS modal. Link: https://github.com/cameronbaney/CSS3-Modal

Morphing 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

FModal

Languages: CSS, JavaScriptWhat we like about it: Full-screen modals that popup.Link: https://github.com/abhisack/FModal.js

ZFDragableModalTransition

ZFDragableModalTransition

Languages: Objective-CWhat we like about it: Customizable animated modals for mobile. Link: https://github.com/zoonooz/ZFDragableModalTransition 

QuestionMark

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

Vanilla Modal

Languages: JavaScript, CSSWhat we like about it: Small, no-frills modal window. Link: https://github.com/thephuse/vanilla-modal

Tingle

Tingle

Languages: JavaScriptWhat we like about it: Pure JavaScript modal that looks minimalistic and clean. Link: http://robinparisi.github.io/tingle/

jsPanel

jsPanel_.png

Languages: jQuery What we like about it: A customizable jQuery plugin for modals and tooltips.Link: http://jspanel.de/v2.6.2/

Julia likes researching and learning about all things software. She likes talking user psychology and UX Design.