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 😉
Here’s a list of 25 popups, for various technologies, frameworks and languages. Take your pick!
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.
- 1. Lightbox – the original jQuery modal script
- 2. ColorBox – a jQuery lightbox
- 3. BPopup – jQuery.bPopup.js
- 4. Avgrund – modal with depth
- 5. AsDepth Modal (Objective-C)
- 6. KGModal – another Objective-C Popup
- 7. ngDialog – an Angular Modal
- 8. An Angular Modal Service
- 9. Another Angular JS Modal Service
- 10. Magnific Popup
- 11. SimpleModal – a lightweight jQuery modal popup
- 12. jQueryUI dialog – a modal using pure jQuery
- 13. ASP.Net Popup using ModalPopupExtenderControl
- 14. ASP.NET TelerikUI Modal Popup Window
- 15. Reveal Modal for the Foundation framework
- 16. jQuery Super Lightweight, Super Simple (Modal) Popup Dialog Box
- 17. Simple Modal
- 18. WordPress – Easy Modal Popup
- 19. Joomla – Modal Popup
- 20. Bootstrap Modal (Native)
- 21. Bootstrap Modal (Custom)
- 22. BootBox
- 23. Messi Pop-up
- 24. ShadowBox.js
- 25. Strip – the less intrusive Lightbox
- Website Review checklist: 70 things to check before your website goes live
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.
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
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.
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.
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.
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
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.
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.
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/
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)
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.
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.
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
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.
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
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
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.
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.
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.
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
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.
With BootBox an Ajax popup is as simple as:
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.
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.
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.
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!