Posted by : Magnus Monday, 26 November 2012
There are many situations where jQuery modal plugins can be useful for guiding the visitors focus to a specific piece of content. Basically a modal window is a kind of pop-up window that have been embedded into a web page and therefore appears without the need for a new browser window. The technique is used all over the Internet today and we often see it applied in image galleries where clicking an image thumbnail opens a larger version in a modal window. It is also useful for presenting login boxes, email sign up forms etc. To help visitor and guide their focus, jQuery modal plugins typically fade out the original content on the page and place the modal window in the center. See the example below.
This article rounds up a large list of jQuery modal plugins you can use to implement modal windows in your web pages. If you are a WordPress user I recommend that you check out some WordPress pop-op plugins before choosing a pure jQuery solution. With WordPress plugins you can often do the same, but with a lot less technicalities and coding. The modal window technique is also used onjQuery tooltips to and if you don’t find what you need below you could continue the search on this category. Please share this page and leave a comment for me.
Example of modal window used in a Facebook image post. If you want similar effects on your website then read on!
My selection of jQuery Modal Plugins
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as 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.
Lightview was built to change the way you overlay content on a website.
Flare Responsive Mobile-Optimized Lightbox Plugin
Flare is a responsive, touch enabled, mobile optimized modal jQuery plugin, which can be used to display single images/videos or entire galleries.
This is a very light jQuery modal script with flexible width & height, it is image free and you can have multiple instances on one page. Good for showing login, sign up & alert panels without loading a new page.
Highslide JS is an image, media and gallery viewer with lots of configuration options. Among others it features single click feature where after the image has been opened or HTML popup, the user can scroll further down or leave the page without closing it. Also, it has outstanding, unconditional and free user support for both commercial and non-commercial users
FancyBox is a jQuery modal script for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
jQuery Lightbox Evolution
Lightbox Evolution is a tool for displaying images, html content, maps, and videos in a “lightbox” style that floats overtop of web page. Using Lightbox Evolution, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
Greybox is a simple lightbox and displays images and other content in a smooth and unobtrusive fashion
A lightweight customizable lightbox plugin for jQuery. Supports photos, grouping, slideshow, ajax, inline, and iframed content. Appearance is controlled through CSS so it can be restyled.
jQuery CSS3 Lightbox Gallery Plugin
The CSS3 Lightbox is a jQuery plugin you can use to display your images. The CSS3 transitions is driven by Animate.css, it is hardware accelerated in the modern browser. And It’s mobile friendly, which works in your touch device like iPhone & iPad.
jQuery Modal Tutorial
jQuery Lightbox Grooveshark Style
jQuery Lightbox – Grooveshark Style is a quick, simple, and easy plugin to use for all of your lightbox needs. It is highly customizable, and very intuitive to use.
jQuery Superbox! is a script which allows you display windows with lightbox effect.