Here is the collection of top 9 modal dialogs JavaScript to display modal dialogs. These scripts have gained widespread popularity due to its simple yet elegant style and easy implementation.
All of them works almost same way. They show a modal dialog message in center of the screen and leaves a semi-transparent layer behind. So that the modal dialog part look brighter & can make sure user go through the message.
Each of these script has it’s own benefits & drawbacks. You may need to find the best to suit your both usability & integration requirement.
Lets go through them one by one…
Lightview
Lightview
Lightview was built to change the way you overlay content on a website.
- Clean: Designed to compliment your content.
- Fast: Smart image preloading.
- Easy: Customizable without having to know CSS.
- Rounded: Adjustable rounded corners, no PNG images required.
- Smart: Content resizes to always fit on your screen.
- Slideshow: One button slideshow.
- Works on all modern browsers.
ThickBox
ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
Features:
- ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
- The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
- ThickBox will resize images that are bigger than the browser window.
- ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
- ThickBox will hide form elements in Windows IE 6.
- ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
- ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).
Sexy Lightbox
Sexy Lightbox
Sexy-lightbox is cool thick box with more add features like resizes the box based on the content width and height, rounded corners, animation on resize with ease.
LightBox
LightBox
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.
Features:
- Image Sets: group related images and navigate through them with ease.
- Visual Effects: fancy pants transitions.
- Backwards Compatibility.
HighSlide JS
HighSlide JS
Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:
- No plugins like Flash or Java required.
- Popup blockers are no problem. The content expands within the active browser window.
- Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
- Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page.
SlimBox
SlimBox
Slimbox is a 4kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
ClearBox
ClearBox
ClearBox is a professional image gallery and HTML viewer program written is JavaScript. Using of ClearBox for private purpose is free. If you would like to use it on commercial pages, please contact the developer.
ModalBox
ModalBox
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing larger versions of images.
ModalBox is built with pure JavaScript and is based on Sam Stephenson’s excellent Prototype JavaScript Framework, script.aculo.us and valid XHTML/CSS. ModalBox uses AJAX to load content.
Hope you found this article useful, if I am missing anything good modal dialog resources, kindly drop the same in comments - which will be really useful for the developers who are really looking out for these kind of stuff.
source : http://www.wittysparks.com/2008/10/28/top-8-modal-dialogs-javascript/
