25+ Extensive List of Essential Pop-up Window enhancements

This article provides an extensive list Essential Pop-up Window enhancements that any web developer should be aware of. The article will mainly but not only focus on lightbox pop-up style solutions that have become incredibly popular.

Did you ever wonder who invented the lightbox pop-up technique? I think I tracked down the source of the “outbreak” that have been really a revolution in how web based interface are designed today. There may have been other similar attempts earlier but they didn’t start this change. (I’m not entirely sure – if you have further information on this please post a comment. ) Back in early 2006 Lokesh Dhakar created and shared a simple little javascript based script for bloggers that put an overlay with an image over the page loaded in the browser, he called it Lightbox JS. See his initial post here if you find this interesting in any way. The main idea of his contribution was to save the user from going to a whole new page to view an enlarged version of an image – essentially by emulating a modal window. Obviously this is really a briliant idea and it is used all over the web now in may different styles and implementations. It isn’t just used for showing a large versions of a thumbnail images. The technique have shown to be useful in many other uses and is for example used for configuration forms in the back-end of fx. Joomla and wordpress, for login and input forms on many websites, etc.

Lightbox JS v2.0

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers. This is the latest version of Lokesh Dhakar initial Lightbox JS script.

Lightbox Plus

WordPress is so popular and its huge free community have put forward several plugins that provide Lightbox style functionality. Lightbox Plus is a plugin that implements Lightbox JS by Lokesh Dhakar (see above). Lightbox Plus is used to create overlay display images on the web-page and to automatically add the correct overlay links to images.

The Lightbox Effect without Lightbox

Lightwindow

LightWindow is similar to the other “lightbox style” scripts. It allows you to put more or less ANYTHING in the pop-up window. Quite powerful.

Lightbox Gone Wild!

In this tutorial, we’ll take a look at how to create a modal window using some nifty JavaScript and CSS.

Leightbox

I’ve changed ParticleTree’s lightbox functionality to allow the use of inline div’s instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. This adaptation makes that possible. Mind you, i’ve completely removed the AJAX calls.

GreyBox

GreyBox can be used to display websites, images and other content in a beautiful way.

• It does not conflict with pop-up blockers
• It’s only 22 KB!
• It’s super easy to setup
• It’s super easy to use
• You can easily alter the style as it is controlled through CSS

Interstitial Content Box

An interstitial is a container that appears over an entire webpage intermittently to display content in an eye catching way. A common example is an interstitial ad, though advertising is certainly just one of many handy uses of an interstitial.

Building a Lightbox with jQuery

Rather than assume that you know what I mean by a lightbox, I’ll briefly explain it. The first experience I had with this UI pattern, and I believe the first real example of it, was by Lokesh Dhakar in 2005. Since then, this pattern of simple, unobtrusive script used to overlay images on the current page huddletogether.com is everywhere. It’s hard to find a modern site without some variant of the in-page popup element over a semi-transparent background. In fact, if you click any external link on my site, you will get that site loaded for you in an lightboxed iframe.

SmoothGallery

Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website

Booklaylet

This is a bookmarklet wrapper code to load any other page content inside the opened window, using an overlayed div and an iframe. This code works on Firefox 1.0-3.0, Safari 2.0-3.0 and Opera 9.0.
It doesn’t work on Internet Explorer 5.01-7.0 (IE6 has a limitation to 488/508 chars).

Create site tours with Amberjack

Amberjack is a lightweight Open Source library, enabling webmasters to create cool site tours. By guiding your site visitors, Amberjack tours can greatly improve the usability of your website.

The Amberjack JavaScript library is lightweight (~4K), stable, LGPL licensed, browser compatible, set up in 2 minutes & super-easy to customize. Best of all, nothing must be installed or learned. Use the Tour Wizard to create great looking and helpful tours for your site or intranet application.

Phatfusion Pageloader

Script that load a div from another page into a div on this page.

Phatfusion multibox

Lightbox that supports images, flash, video, mp3s, html.

mooSlide

Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc.

By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.

But that’s not all – it doesn’t redirect you to that page, but opens up the page in a hovered layer. Convenient and easy. On top of the opened layer is a small “x”, which allows to close the window later on.

GlassBox

GlassBox is a compact Javascript User Interface (UI) library, which use Prototype and Script.aculo.us for some effects. With GlassBox you can build transparent border, colorful layouts and “Flash-like” effects. Take a look at the site itself: you can use the keyboard navigation: Keys 1-8 (display page), arrows left/right (previous/next page) and arrows up/down (Scroll content).

Phatfusion lightbox