25 (Mostly Free) Easy Ajax Popup Windows and jQuery Modals

You used to hate pop-ups didn’t you? I know I did! A few years back, annoying popups used to randomly appear on your desktop whilst you were browsing, with you having no idea from where they’ve come from! Thankfully, that rarely happens any longer and Ajax popup widnows and jQuery modals are making a comeback – this time, they are meant to improve the User Experience rather than annoy the heck out of you.

Although pop-ups have a dodgy history, there are many valid reasons for using a modal popup. Whether you want to show an image gallery, or increase the number of subscribers on your website, clean, non-intrusive, modal on-click popups powered by jQuery, Ajax or otherwise still have an important place in web design. You can easily see this in the huge amount of libraries which are still available to help you generate Ajax popup or jQuery modal popups – in fact you’ll find it harder to make a choice of WHICH library to use as opposed to WHETHER you’ll find a popup to suit your needs 😉

A modal popup window being used as a login box

Modal windows or popups can be used for all kinds of functionality

Here’s a list of 25 popups, for various technologies, frameworks and languages. Take your pick!

Exclusive bonus: The Ultimate Web Design Checklist – 128 things to do to create an amazing website

Click here to download the 128 steps your need to do to complete a new website project.

 

Incidentally, as a web developer working on creating awesome websites, have you looked at our website checklist? It’s a huge list of all of the tasks you need to get a website up and running.

Hey web designer!

When you’ve got plenty of web design projects together, chances are you might need something to help you manage all of the projects. Something which works, but doesn’t get in the way. Something which can keep you (your team) and even your client all in sync with the project progress.

Check out BeeWits now – we’ve built BeeWits from the group up to help us manage our own web design projects better!

1. Lightbox – the original jQuery modal script

The original lightbox script has been around for eight years and you probably know how many thousands of scripts it has inspired over the years. So if you’re looking for the original LightBox / modal pop-up – here it is! This is THE Ajax popup of choice if you’re not sure what would work best for you.

How to use it: http://lokeshdhakar.com/projects/lightbox2/
Demo: http://lokeshdhakar.com/projects/lightbox2/
Github: https://github.com/lokesh/lightbox2/

Lightbox - the original jQuery modal script demo

Lightbox – the original jQuery modal script demo

2. ColorBox – a jQuery lightbox

ColorBox is one of the most popular modal pop-ups / lightbox which have been around for a while. This library has been used to implement a huge number of different types of Ajax popup windows and it is used in literally millions of websites (at least 1.9 million sites at the time of writing). Definitely one of the most popular libraries to create modal pop-up windows for whatever website you are currently developing, in whatever language you are using. The reason for its popularity is that it is very very flexible and can suit a huge variety of modal pop-up window uses

How to use it: http://www.jacklmoore.com/colorbox/
Github: https://github.com/jackmoore/colorbox
Demo: http://www.jacklmoore.com/colorbox/example1/

ColorBox - a jQuery lightbox demo

ColorBox – a jQuery lightbox demo

3. BPopup – jQuery.bPopup.js

bPopup is a lightweight (1.49KB gzipped) jQuery modal pop-up plugin. Again, this Ajax popup gives you the opportunities to customize it to fit your needs.

How to use it: http://dinbror.dk/blog/bPopup/
GitHub: https://github.com/dinbror/bpopup/
Demo: http://dinbror.dk/bpopup/

BPopup - jQuery.bPopup.js demo

BPopup – jQuery.bPopup.js demo

4. Avgrund – modal with depth

Avgrund is a jQuery plugin for modal boxes and pop-ups which is somewhat different from others by showing depth between pop-up and page. It works in all modern browsers and gracefully degrades in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behaviour). Interestingly Avgrund is swedish for abyss.

Github: https://github.com/voronianski/jquery.avgrund.js
Demo: http://labs.voronianski.com/jquery.avgrund.js/
How to use it: https://github.com/voronianski/jquery.avgrund.js

Avgrund - modal with depth demo

Avgrund – modal with depth demo

5. AsDepth Modal (Objective-C)

This is an Objective-C modal, for iOS devices also inspired by the Avgrund popup above. It creates the same type of effect for popups on iOS devices.

Github: https://github.com/autresphere/ASDepthModal
Demo: https://github.com/autresphere/ASDepthModal
How to use it: https://github.com/autresphere/ASDepthModal

AsDepth Modal demo showing on an old(er) iPhone

AS Depth Modal being demoed on an old(er) iPhone

6. KGModal – another Objective-C Popup

KGModal is another Objective-C pop-up, therefore can be used on iOS devices. It is essentially a drop in control that allows the display of any view in a modal pop-up. The modal will automatically scale to fit the content view and centre it on screen with animations

GitHub: https://github.com/kgn/KGModal
Demo: https://www.cocoacontrols.com/controls/kgmodal (Click Video)
How to use it: https://github.com/kgn/KGModal

KGModal - another Objective-C Popup demo

KGModal – another Objective-C Popup demo

7. ngDialog – an Angular Modal

If you are working with Angular, you can use ngDialog, which is essentially a modals and pop-ups provider for Angular.js applications. The great thing about this library is that it has no additional dependencies, whilst also being highly customizable. If you’re into Angular, this is great choice for an Ajax popup.

How to use it: https://github.com/likeastore/ngDialog#api
Demo: http://likeastore.github.io/ngDialog/
Github: https://github.com/likeastore/ngDialog

ngDialog - an Angular Modal demo

ngDialog – an Angular Modal demo

8. An Angular Modal Service

This Ajax popup or modal is defined as an Angular service, so essentially you’ll be able to create pop-ups and modals via this Angular service. You can reference the script, specify the service as a dependency of the application and then inject the modal service into any controller, service or directive where you need it.

GitHub: http://dwmkerr.github.io/angular-modal-service/
Demo: http://jsfiddle.net/dwmkerr/8MVLJ/
How to use it: https://github.com/dwmkerr/angular-modal-service#usage

An Angular Modal Service demo

Angular Modal Service demo

9. Another Angular JS Modal Service

This is another Angular pop-up implemented via an AngularJS service that creates a Modal Pop-up with a given HTML template and controller. As an Ajax popup, it doesn’t get quite simpler that this one.

How to use: http://fundoo-solutions.github.io/angularjs-modal-service/
Demo: http://fundoo-solutions.github.io/angularjs-modal-service/
GitHub: https://github.com/Fundoo-Solutions/angularjs-modal-service

Another AngularJS Modal Service demo

Another AngularJS Modal Service demo

10. Magnific Popup

This Ajax popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js)

How to use it: http://dimsemenov.com/plugins/magnific-popup/documentation.html
Demo: http://dimsemenov.com/plugins/magnific-popup/
GitHub: https://github.com/dimsemenov/Magnific-Popup

Magnific popup being used to display an image gallery

Magnific popup being used to display an image gallery

11. SimpleModal – a lightweight jQuery modal popup

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development – more of a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

How to use it: http://www.ericmmartin.com/projects/simplemodal/
Demo: http://www.ericmmartin.com/projects/simplemodal-demos/
GitHub: https://github.com/ericmmartin/simplemodal

SimpleModal - a lightweight jQuery modal popup demo

SimpleModal – a lightweight jQuery modal popup demo

12. jQueryUI dialog – a modal using pure jQuery

If you want to stay pure and native with jQuery and jQueryUI, you can use the JQueryUI dialog which essentially allows you to create a modal window by specifying modal property of the dialog.

How to use it: http://api.jqueryui.com/dialog/
Demo: http://jsfiddle.net/5oemge6o/2/
GitHub: https://github.com/jquery/jquery-ui

 jQueryUI dialog - a modal using pure jQuery demo

jQueryUI dialog – a modal using pure jQuery demo

13. ASP.Net Popup using ModalPopupExtenderControl

If you are using ASP.NET you can also generate Modal Pop-up windows with the AJAX Control Toolkit by using ModalPopupExtenderControl. AS you can see, any language is able to generate Ajax popup windows in their own way.

How to use it / Demo: http://www.aspsnippets.com/Articles/Building-Modal-Popup-using-ASPNet-AJAX-ModalPopupExtender-Control.aspx
Source: http://www.aspsnippets.com/DownloadFile.aspx?File=1bfe156b-ede8-4a4c-8c36-ac5d50ea5bd1.zip

ASP.Net Popup using ModalPopupExtenderControl demo

ASP.Net Popup using ModalPopupExtenderControl demo

14. ASP.NET TelerikUI Modal Popup Window

If you’ve been around ASP.NET for a while, chances are you have come across Telerik products. The RadWindow – Telerik’s ASP.NET Window has various functions, one of which also allows the creation of a modal pop-up. Of course, anything from Telerik comes at a price, so note that this is not a free library unlike most of the libraries in this post. But as with other products from Telerik this Ajax popup is something which can be relied on for commerical projects.

Demo http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx
How to use it: http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx

ASP.NET TelerikUI Modal Popup Window demo

ASP.NET TelerikUI Modal Popup Window demo

15. Reveal Modal for Foundation framework

If you are using the responsive framework Foundations, Reveal is a jQuery modal pop-up which makes it easy to create modal dialogs or pop-up windows. It requires very little markup to create this Ajax popup window

How to use it: http://foundation.zurb.com/docs/components/reveal.html
Demo: http://foundation.zurb.com/docs/components/reveal.html
Download (Foundation): http://foundation.zurb.com/develop/download.html

Reveal Modal for Foundation framework demo

Reveal Modal for Foundation framework demo

16. jQuery Super Lightweight, Super Simple (Modal) Popup Dialog Box

The tag line of this pop-up prepares you for what it’s all about a jQuery Super Lightweight, Super Simple (Modal) Popup Dialog Box which is just 1.5KB in size. It supports fading backgrounds, rounded corners, is very simple to setup and use. You won’t find any complex features, but an effective dialog box.

How to use it: http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
Demo: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/
GitHub: https://github.com/shibbard/jQuery-modalPopLite

jQuery Super Lightweight, Super Simple (Modal) Popup Dialog Box demo

jQuery Super Lightweight, Super Simple (Modal) Popup Dialog Box demo

17. Simple Modal

There’s no lack of Ajax popup windows calling themselves simple 🙂 SIMPLEMODAL is essentially a small plugin to create modal windows, anything from an alert to confirm messages with few lines of code. Configuration of the confirmation message windows involves the use of callbacks to be applied to affirmative action. It can work in asynchronous mode and retrieve content either from external pages or use inline content.

How to use: http://simplemodal.plasm.it/#how-to-use
Demo: http://simplemodal.plasm.it/#examples
GitHub: https://github.com/plasm/simplemodal

The nicely styled Simple Modal Popup

The nicely styled Simple Modal Popup

18. WordPress – Easy Modal Popup

If you are using WordPress and don’t want to get your hands dirty by using one of the Ajax popup windows in this page, Easy Modal is one of the best native WordPress popup plugins around as attributed to the many positive reviews this pop-up plugin has on the WordPress directory.

How to use: https://easy-modal.com/documentation/easy-modal/getting-started
Demo: https://easy-modal.com/documentation/easy-modal/getting-started (scroll to the bottom)
Download: https://wordpress.org/plugins/easy-modal/

WordPress - Easy Modal Popup demo

WordPress – Easy Modal Popup demo

19. Joomla – Modal Popup

On the other hand, if you are using Joomla, the extension Modals is a native Joomla extension which will help you create Ajax popup windows. This Modals can create links and also convert any existing link in your website to a modal pop-up window link.

How to use: http://www.nonumber.nl/extensions/modals/userguide
Demo: http://demo.nonumber.nl/index.php/12-modals
Download: http://www.nonumber.nl/extensions/modals

Joomla - Modal Popup demo

Joomla – Modal Popup demo

20. BootStrap Modal (Native)

If you are using Bootstrap natively and don’t want to add any additional libraries or are trying to keep external content to a minimum, Bootstrap has native supports for modal windows.
Native Bootstrap Modals are flexible, dialog prompts with the minimum required functionality from a modal window

How to use: http://getbootstrap.com/javascript/#modals
Demo: http://.com/javascript/#modals-examples
Download (Bootstrap): http://getbootstrap.com/getting-started/#download

The native Bootstrap (native) modal popup demo

The native Bootstrap modal popup

21. BootStrap Modal (Custom)

If you are looking for more functionality from a modal pop-up in Bootstrap, the BootStrap Modal extends Bootstrap’s native modals to provide additional functions. It has ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.

How to use it: https://github.com/jschr/bootstrap-modal
Demo: http://jschr.github.io/bootstrap-modal/
Github: https://github.com/jschr/bootstrap-modal

BootStrap Modal (Custom) demo

BootStrap Modal (Custom) demo

22. BootBox

Bootbox.js is a small JavaScript library where you can create modal pop-ups using Bootstrap modals, without having to worry about the nitty gritty details like creating, managing or removing the required DOM elements or JS event handlers.
With BootBox an Ajax popup is as simple as:
bootbox.alert(“Hello World!”)

How to use it: http://bootboxjs.com/documentation.html
Demo: http://bootboxjs.com/
GitHub: https://github.com/makeusabrew/bootbox

BootBox demo

BootBox demo

23. Messi Pop-up

Messi is another jQuery plugin to show clean, elegant messages in a simple way (another simple one ;)). Just as with most of the pop-ups featured in this article you can display text, html content, images and ajax requests with this pop-up.

How to use it: http://marcosesperon.es/apps/messi/
Demo: http://marcosesperon.es/apps/messi/
GitHub: https://github.com/marcosesperon/Messi/

Messi Popup demo

Messi Popup demo

24. ShadowBox.js

Shadowbox is advertized as a web-based media viewer application that supports all of the web’s most popular publishing formats. It’s strongpoint is the display of various media files as can be easily seen from the examples, where you can see images, SWF files, various video types including YouTube, QuickTime and Flash videos. The download also allows you to choose which features you want to make sure that the setup and size of the files downloaded is kept simpler and leaner.

Usage: http://www.shadowbox-js.com/usage.html
Demo: http://www.shadowbox-js.com/index.html (scroll to Examples)
Download: http://www.shadowbox-js.com/download.html

ShadowBox.js demo

ShadowBox.js demo

25. Strip – the less intrusive Lightbox

Strip is a Lightbox that only partially covers the page, making it less intrusive on larger screens, with room to interact with the page, while giving smaller mobile devices the classic Lightbox experience.

How to use it: http://www.stripjs.com/documentation

Demo: http://www.stripjs.com/
GitHub: https://github.com/staaky/strip

Strip - the less intrusive Lightbox demo

Strip – the less intrusive Lightbox demo

Website Review checklist: 70 things to check before your website goes live

Click here to download the step-by-step website review checklist to make sure your website goes live in tip-top shape.

 

The great thing about most of these pop-ups is that you can focus on your website and let them do the dirty work for you.

Over to you – is there another Ajax popup window which you prefer to use?

Share it with us in the comments below!