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: https://lokeshdhakar.com/projects/lightbox2/
Demo: https://lokeshdhakar.com/projects/lightbox2/
Github: https://github.com/lokesh/lightbox2/

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/

If you are looking to tweak some of this code in these scripts, it would be best to find good Javascript developers to be able to help you out. This is a great article to help you make the right decisions with respect to finding great hirees: How to hire (Great) Javascript developers.

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: https://dinbror.dk/blog/bPopup/
GitHub: https://github.com/dinbror/bpopup/
Demo: https://dinbror.dk/bpopup/

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 an 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

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

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

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 a 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

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

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 than 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

10. Magnific Popup

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

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

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: https://www.ericmmartin.com/projects/simplemodal/
Demo: https://www.ericmmartin.com/projects/simplemodal-demos/
GitHub: https://github.com/ericmmartin/simplemodal

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 the 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

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: https://www.aspsnippets.com/Articles/Building-Modal-Popup-using-ASPNet-AJAX-ModalPopupExtender-Control.aspx
Source: https://www.aspsnippets.com/DownloadFile.aspx?File=1bfe156b-ede8-4a4c-8c36-ac5d50ea5bd1.zip

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 commercial projects.

Demo https://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

15. Reveal Modal for the Foundation framework

If you are using the responsive framework Foundations, Reveal is a jQuery modal pop-up that 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: https://get.foundation/sites/docs-v5/components/reveal.htmll
Demo: https://get.foundation/sites/docs-v5/components/reveal.html
Download (Foundation): https://get.foundation/

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 set up 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:
GitHub: https://github.com/shibbard/jQuery-modalPopLite

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: https://simplemodal.plasm.it/#how-to-use
Demo: https://simplemodal.plasm.it/#examples
GitHub: https://github.com/plasm/simplemodal

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 on 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
Download: https://wordpress.org/plugins/easy-modal/

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 plugin can create links and also convert any existing link in your website to a modal pop-up window link.

How to use: https://www.regularlabs.com/extensions/modals/
Demo: https://www.regularlabs.com/extensions/modals/examples
Download: https://www.regularlabs.com/extensions/modals

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

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 to 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

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

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: https://marcosesperon.es/apps/messi/
Demo: https://marcosesperon.es/apps/messi/
GitHub: https://github.com/marcosesperon/Messi/

24. ShadowBox.js

Shadowbox is advertized as a web-based media viewer application that supports all of the web’s most popular publishing formats. Its strong point 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 are kept simpler and leaner.

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

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