Modal Windows are usually called pop-ups or inline pop-ups. Modal Windows are very useful in communicating a message, helping a user complete a task, showing progress, displaying a gallery of pictures etc. The point is that the content is inline with out a page blink. If you’re using Modal Windows then you’re likely designing for the user or are approaching web projects with User Centered Design in mind which is good.
Modal Windows according to Wiki:
In user interface design, a modal window is a child window that requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box
I think the biggest hurdle in using Modal Windows effectively is choosing the right flavor. There are a lot of flavors and not much time in a day to rate them all. Me not being a JS programmer am predisposed to choose designer friendly frameworks.
Below I have created a short list of Modal Window frame works that can be very helpful. At this point I really like Colorbox. Please feel free to add your own.
- colorbox – A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
- jQueryUI Dialog – The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel
- fancybox – FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
- DOM window – jQuery plugin (jquery.DOMwindow.js) used to create DOM windows.
- shadowbox.js – Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats.
- GreyBox – GreyBox can be used to display websites, images and other content in a beautiful way.
- ThickBox (No Longer Supported) – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library.
- ModalBox – ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional windows.
- Prototype Window – This javascript class allows you to add window in a HTML page.
- Simple Modal – SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development.
- JQModal – jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser.
- LivePipe UI – LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework.
Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.
