If you are as old as I am, you probably remember when the World Wide Web, as we called it, was mostly just a bunch of hypertext pages. In other words, a website consisted of one page that linked to other pages, and if you were fortunate, the webmaster threw in a few scanned photos.
Fast forward to the 21st century, and we now have dynamic web applications that can do just about anything, even mimic an entire operating system.
While many developers are in the habit of using Adobe Flash or some other third-party software to create their web applications, you do not have to circumvent web standards to make your website interesting. A combination of HTML, CSS, and Javascript is really all you need.
One feature of the “Web 2.0” era that has literally popped up all over the web is the modal window. A modal window is essentially a window within a window. Rather than opening a new browser popup window, a modal window opens within the website and is completely dependent on it. Leave the website, and the modal window disappears.
Like most web functions, modal windows can be used for good and evil. If you have visited Flickr.com recently, you might have noticed that they now have a modal window view option for their images, which is something many users probably enjoy.
On the other hand, you have undoubtedly come across a site that pops up a modal window with an ad, survey, or other annoyance. They are immune to popup blockers, and some will stay with you even if you scroll down the page.
My hope is that this article will encourage you to use modal windows like Flickr and not like the latter example. They are convenient for things like internal login prompts, chat windows, and service notifications, all of which can appear without the user having to leave the page. Furthermore, modal windows can allow a user to run an entire operating system on a single web site, as is the case with EyeOS.
There are numerous ways to create modal windows and hundreds of variations in type, size, color, decoration, exit mechanism, and more. Today, we will cover a couple of different examples that you can use in your websites and customize to your liking.
You can also download scripts that will create modal windows, as well as extensions for content management systems like Joomla, Drupal, and WordPress.
Modal Window Examples
Here are a few examples of modal windows.
Lightbox
The most common use of modal windows is for images, as I described in the Flickr example. To view an image in a modal window, the user clicks on a thumbnail of the image, and rather than opening the image on a new page or in a popup window, a modal window fills the web page, usually complete with a hover/shadow effect, a close button, and sometimes even a navigation to scroll to more images in the gallery.
Flickr still allows the user to view the image on a normal page, and this is the correct usage of modal windows. It should not be the only method of viewing the image. The lightbox effect can also be used for embedded videos, an appealing alternative to having YouTube videos load directly on a web page, increasing wait time for visitors.
Login/Registration Forms
Have you ever found the exact page you wanted on a website, only to be told you must login to continue. If you have an account already, it is no problem. If not, you must click “register” and invariably be redirected to another page. You may be redirected a few more times before you can try to find your way back.
Some sites will automatically take you back to the page you were on, but even that is not as convenient as a single modal window popping up to allow login or registration, and then disappearing, allowing you to continue on the same page.
By offering a modal login window to your users, you can save them time and avoid confusing redirects and lost or frustrated customers.
Notification System
The more advanced a web application is, the more there is a need to inform users of events as they occur. Facebook, for example will alert a user when a new message or comment arrives.
If you have ever experienced an error on Facebook, you also have seen a modal window appear and present the error to you. Rather than taking you off the page to display the error, you can close the little window and continue with something else on the page.
Contact Forms
Feedback on a website is very important, and contact forms are a necessity. To avoid spam, most websites no longer display email addresses for contact, and even if they do, they usually still offer contact forms that can be used to direct users to formulate their questions in the most helpful way possible.
With a modal contact window, the form pops up and is easily accessible to the user, without forcing the user to another page.
Search Boxes
Websites come with a multitude of different types of search boxes. Often times, just finding the search function on a website can be a challenge. Then, you are presented with different styles, search methods, and destination pages, and that is just with a basic search. Advanced searches can lead you further away from the main page of the site.
Modal windows can work for searching in many instances, but it has to be used for a purpose (like presenting options) rather than just a fancy gimmick or effect.
Help and Tooltips
A staple of operating systems for years, popup tips (not ads disguised as tips) are a useful way to give the user more information about a particular topic. You can configure them to activate upon a user click or with a simple mouseover.
Now that you have all of these wonderful ideas for modal windows, you should give them a try.