Modal Windows In Modern Web Design

Advertisement

Web design is essentially the organization of information into a readable, usable, functional and accessible format. Good organization of content is crucial, and you need a strong layout that you can build a website upon. You can use numerous interface elements and structures to organize content, such as jQuery-based content sliders and modal windows, which are basically windows that float above the page.

The modal window has many advantages. For example, when a modal window contains a smaller element, the user doesn’t need to load an entirely new page just to access it (another way to achieve the same effect is e.g. by using AJAX-based tabs). By providing modal windows, you improve the usability of your website. Having to load pages over and over will annoy most users, so avoiding that is definitely a good thing. Modal windows also allow you to save space by getting rid of large elements that don’t need to be on the main page. For example, rather than putting a full video on a page, you can just provide a link, thumbnail or button of some sort.

In this article, we’ll go over best practices and trends for working with and building modal windows. We’ll also provide numerous examples of well-constructed modal windows and a few scripts to get you started with building them.

You may be interested in the following related posts:

When to Use Modal Windows

Modal windows are an excellent structural element, but they don’t work for every type of content or media. Here are few elements for which you should consider using modal windows.

Lightbox for Images/Videos

The most obvious use of modal windows is for the lightbox, which showcases images and video in a clean and usable fashion. By using a lightbox for images, users don’t have to load a new page just to view a single image or video. Modal windows also save space in the content layout by allowing you to show only the thumbnail of an image or video, which opens the modal window when clicked. By using a thumbnail instead of the entire element, you take up much less space and the layout looks more organized.

Furthermore, you would usually blur or fade out the background behind a modal window, putting the focus on the image or video itself, thus creating an excellent environment in which site visitors can view the media. For details on fading and blurring out the background of a modal window, see the styling practices outlined below.

When using a lightbox for an image gallery, be sure to link every image to the same lightbox, providing “Next” and “Previous” buttons to allow users to navigate the image set with ease. The user then does not have to close and re-open the modal window to view each image in the gallery.

Contact Forms

One often sees contact forms contained in modal windows. Modal windows work well for this purpose because you don’t have to create a full page for the function. In terms of usability, it is important for contact forms to be immediately available and easy to find. By using a floating window, contact forms are easily accessible on each and every page. Contact forms are generally small, so they will fit quite nicely in these windows.

Sign-Up/Log-In Forms

Instead of creating a separate page for users to log in to and sign up for your website, you can use a modal window, which is actually often used for this purpose. This approach makes the form available on each page for easier access. You can include a link to the log-in window in the header of the website.

Alerts/Notices

When you want to alert users of a critical function or an action taking place, the best way to do so is through a modal window. When a modal window opens on a page, the user cannot ignore it because it will appear directly in the middle of the screen, right where the user is looking. Furthermore, the rest of the content will be faded out and disabled, so the user can’t do anything else until they look at the window and click to close it. In the screenshot below, you can see a modal window being used to alert users to a download.

Please notice that you should not use modal window as an alternative pop-up-approach. Please make sure to alert your visitors only in case something cruical to the current browsing session has taken place. In many situations, a simple faded block in the layout would work better than a modal window.

Help Elements/Tips

Additional help elements and tips aren’t essential to the functionality and navigation of a website, so you don’t want them to take up space and get in the way of content. Not all users want to use them anyway. However, they need to be conveniently located for those who do want to use them, so it seems reasonable to show help elements and tips in modal windows. Users can easily open and close them, without them getting in the way of content and functionality.

Here below is a good example of a help element in a floating window. This window is much smaller than the other ones we’ve seen; but it contains similar functions. For example, a semi-transparent border for visual separation and an “exit” (close-) button in the top-right corner.

Search Boxes

This is a less common practice, but you will occasionally see modal windows containing search boxes. Advanced search functionality can take up quite a bit of room, so to prevent a large search box from taking space away from the content, you can put it in a floating window. You can see this in practice in the screenshot below.

Embedding PDFs

Sometimes you need to embed files on your website, such as a PDF of your résumé. Instead of providing a link that users can click on to download the PDF to their computer or embedding the PDF some other way, you can use a modal window for the same purpose. This way, the PDF can be easily viewed without disrupting the user’s experience of the website. By blurring the background, you also bring focus to the PDF, which improves usability.

Usability and Styling Practices

The following is a list of usability and styling practices and trends to keep in mind when building your modal windows.

Blur and Fade Out Background of Window

Foremost in importance for usability and styling is fading out the page behind a floating window. You will see this practiced nearly everywhere, most often with lightboxes for media. By fading out the page, you bring all of the user’s attention to the floating window. If the background doesn’t fade, the user may not even realize right away that the window is “floating” above the page and is not a part of the main layout. The appearance of a window physically floating above the page also gives your website dimension. It looks cleaner and eliminates confusion. Overall, the fading provides much needed separation between the window and the page, improving functionality and usability.

Make sure the fade is heavy, but leave a slight opacity, so that the user knows the page hasn’t disappeared. For example, a black fade with about 75% opacity would work well. But for websites with a white background, fade the page with white with a slight opacity, and use a drop-shadow.

Sometimes you will see a modal window that doesn’t fade out the entire page but instead has a strong drop-shadow below it to add dimension. This creates the same effect and provides a similar visual separation. You can see this technique used perfectly in the screenshot below.

Exit Strategy: Button, Click Outside Window, Escape Key

To improve functionality, always provide an exit button in an upper corner of the window. It is standard practice to use a simple circular button with an “x” graphic, which is clean and quite obvious for the user. In the lightbox shown below, you can clearly see the exit button.

Other methods of allowing users to close modal windows is to let them click outside the window on the page behind, to click on the displayed element in the modal window or to hit the Escape key once.

Disable All Other Page Functions

Disable all functionality of the page behind the window. It should be focused out, and no buttons should be able to be clicked when the modal window is open. The floating window should be separated from the rest of the content, so disabling the page below creates a better separation. Keeping page scrolling functionality is a good idea, though, so that users have at least some freedom to refer back to the page if needed.

Using Transition Effects

Transition effects are small details that look very nice if done correctly. One good transition effect for modal windows is fading in and out. But don’t overdo it to the point of annoying users. Keep the fade brief but slightly noticeable.

In the example below, the blurred gray backdrop fades in and out, creating a great effect.

Scripts, Tools and Plug-Ins For Lightboxes and Modal Windows

When you start the process of integrating modal windows, you’ll probably want something to build off of. Here are 11 excellent jQuery scripts and plug-ins on which to base your modal windows. Each has its own unique features and functions, so check them all out.

Fancy Lightbox
This is one of the better lightbox jQuery plug-ins. It’s well styled and very functional. It has clean styling, labeling features and website integration, and it works with AJAX.

Lightbox 2
This is the original lightbox script, built only for images. It’s simply styled and supports image set viewing.

Facebook Image/Content Viewer
Here is an excellent script, based on Facebook’s floating window. This one supports images and content and is styled similar to Facebook’s well-known window.

Woork Mootools Lightbox
This excellent tutorial from Woork shows you how to create a simple lightbox script. The script includes image set functions and label features.

nyroModal jQuery Plug-In
This simple window plug-in supports all types of media and file scripts, including AJAX. It also has some great show/hide effects.

jQuery Alert Dialog
This jQuery plug-in is for alert and dialog boxes. It has numerous functions and works very nicely for sending messages to users.

LightWindow
Here is a comprehensive lightbox script with many features, such as PDF embedding, multiple image gallery support, SWF implementation and more.

Prototype Window Class
Another in-depth set of scripts with different functions, such as dialog boxes, log-in windows, AJAX content windows, image lightboxes and more.

ThickBox 3.1
One of the more popular lightbox tools, ThickBox. It works with images, inline content and AJAX.

prettyPhoto
A well-styled image lightbox that works nicely with image sets.

jQuery Expose
This is a little different than a modal window script. This one exposes selected HTML elements. When you click a specific element, the rest of the page fades out. This is an excellent alternative to the modal window: it still fades out the page to bring focus to an element.

Showcase of Modal Windows

Grooveshark
Grooveshark is a well-constructed and well-styled application, and the modal windows are no exception. A modal window, with the page faded out, is used for the log-in and sign-up functions.

Digg
Digg is another user-generated website with log-in and sign-up functions in a floating window. The log-in link is in the header of the website. Notice that a semi-transparent border is used instead of a fade and drop-shadow. The border provides more visual separation.

Apple Movie Trailers
Apple uses modal windows in many places. Here you can see a window used for viewing movie trailers. The window is built just right so that large video files don’t impact the performance of the window.

Apple iMac: Design Gallery
Another example of modal windows on Apple’s website. These have a clean, simple style with a strong drop-shadow for visual separation.

Espionage
Another good example of an image lightbox. In this one, the image extends to the edge of the window, and the exit button is overlaid directly on the image. No border is necessary here because of the strong color contrast.

Daylite 3
A good example of a window with the background faded out. Multiple pages of content are integrated here in a single modal window.

Behance
Another contact form, this one with the familiar “Send to a friend” element, which is usually put in a modal window. Because the website has a mostly dark background, a light semi-transparent border is used for separation.

Facebook
Facebook’s very recognizable modal window. This one contains information linked to a help element in the sign-up form. Again, a strong semi-transparent border.

KISSmetrics
Here is an excellent log-in form in a modal window. The form is well styled and contains help elements to improve usability: just because the log-in function is in a modal window doesn’t mean you can neglect usability.

Nasi Briyani Lounge
Another log-in form, this one a little different. Instead of a full modal window, this is just a simple pop-up window with a small form.

Pixelight Creative
A lightbox on a freelancer’s portfolio website. When you click one of the portfolio items, a larger view opens in a lightbox.

Capo
Another well-styled window, this one a video featuring a tour of the software, which is a common practice. This one also contains a simple border with a slight drop-shadow.

Accept-Ideas
This floating window is attached to the search box. When you type a query, the results show up in the modal window itself. The window has basic functionality, including an exit button and border.

The Typographic Desk Reference
A very simple modal window with a strong shadow that adds a lot of depth.

Evernote Web Application
This screenshot shows an alert that you get when you open Evernote’s Web application. Notice how the page fades out strongly, which puts all of the focus on the window’s content.

Iceberg
Another sign-up form in a floating window. This one doesn’t have a fade or shadow but does have a border for separation.

Viewzi Corporate
A beautifully styled modal window. Notice the large clean exit button in the upper corner, the generous padding in the window and the semi-transparent background.

Mail Chimp
This lightbox has a semi-transparent border, and the page fades out.

The Resumator
Notice in this one how strongly the background of the image contrasts with the page background. A label is used here but not attached to the window, creating a very nice look.

Checkout App
A well-styled image modal window. This window has a slight drop-shadow to add depth and a solid border to provide more separation and frame the image.

Pixelmator
Another example of a nice download alert. This alert pops up immediately once the download starts. Notice the excellent styling, such as the slight opacity of the window.

Ballpark
Here is a modal window for a video, common for corporate and software websites such as this one. You most often see QuickTime and SWF videos in modals, but this one embeds a video from Vimeo. A great fade in and out transition, too.

Backpack
Another window with a video. Notice again how the page fades to a lighter rather than darker color.

Guifx
An image lightbox for a portfolio, always a great idea if you want to include larger images to show details of your work.

Further Resources

You may be interested in the following related posts:

(al)

↑ Back to top

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

  1. 1

    I really love contact forms that popup. It’s just such a neat effect I don’t think is utilized enough on websites today.

    Great collection Matt. This has been my favorite one in a while here.

    0
  2. 2

    Abrishca Digital Media

    May 27, 2009 4:27 pm

    Wow, what a massively comprehensive showcase and roundup. Thanks for all your effort.

    0
  3. 3

    I love modal windows, they really do look good when done properly. Im always inspired by these types of articles, but rarely get round to doing anything about them (big on reading, not so big on action), so im laying down the challenge to…me…to do something with modals this weekend using the information here. Thanks Smashing, another great article.

    0
  4. 4

    Good inspiration, Modal windows really add some good time saving/frustration saving for the end user.

    0
  5. 5

    I love modal windows.
    One that i really like is from SneakersBR wich can bee seen in:: Nike Air Max 1 Lanceiro

    0
  6. 6

    Great article, very useful.

    One mistake: Screenshot for Webdesignwall’s use of modal windows links to this: http://www.webdesignerwwall.com/trends/modern-sitemap-and-footer/

    An extra ‘w’ in ”wall’

    0
  7. 7

    This is really great! I have been looking for a comprehensive jQuery modal box!

    0
  8. 8

    While these offer a nice visual effect, they are particularly poor from an accessibility standpoint.

    3
  9. 9

    Let’s not forget about little ol’ progressive enhancement, and realise that modals should be used purely as an ENHANCEMENT. I’ve seen some sites that rely on modals for forms, etc, which fail miserably when JS is disabled.

    3
  10. 10

    you guys have been reading my mind for the last few weeks. good job!

    0
  11. 11

    Dean Higginbotham

    May 27, 2009 8:31 pm

    Great list!

    I’ve gone through tons of these, “window shopping” (ha!), and landed on jqModal (http://dev.iceburg.net/jquery/jqModal/). I use it all over my site (www.itrackmine.com). It’s extremely robust.

    The ONLY issue I had was having it close itself (a common problem among developers using this). But, after banging my head against the wall for days, it turned out to only need FIVE lines of code to close it (ask and I’m happy to share).

    “Help Elements/Tips” is not something I like to use modals with. Instead, my tool of choice is clueTip (http://plugins.learningjquery.com/cluetip/). It’s only issue I found is having a clueTip spawn a second, independent, clueTip (such as using it as the mouseover popup and a second one as the click popup on the same link). Otherwise, extremely robust and flexible.

    0
  12. 12

    Nice list.

    But you forgot to mention ColorBox. A really customizable and easy to use lightbox.

    0
  13. 13

    wooooooooooooowww superb collection I liked it a lot

    I have already used some of plugin’s like lightbox , thickbox and some more but this collection make easy for everyone to choose any one of them according to their requirements.

    thanks for your good efforts to make list together and make a easy way to developer to choose from.

    0
  14. 14

    why the hell do i see a mac or osx in every other picture when most of these elements are designed and coded in windows.
    great collection nonetheless

    -2
  15. 15

    Nice article but sometimes these modal windows are a pain. Specially when they use a long time to load and if they are used just for the sake of it.

    0
  16. 16

    One of the best modal windows from jquery is colorbox. Google it and see how good it is.

    0
  17. 17

    Search box from collabfinder.com is wonderful! Well done!

    0
  18. 18

    Nice collection. I love modal boxes. I have also written a tutorial on how to build one by yourself: http://www.andrislinz.ch/how-to-modal-box.

    0
  19. 19

    Nice post but sometimes if there is any miskate in the code its really difficult to find out that error.

    And if Ajax/javascript is disabled in user’s system then he/she can’t see the effect whatever we have used. I think……..

    0
  20. 20

    Great article. Exactly what I was looking for! Smashing Magazine can read my thoughts…
    Thank you!

    0
  21. 21

    Let me suggest you to take a look @ Shadowbox: for me it’s the best modal window script

    0
  22. 22

    Like comment #8, I think it would be nice to provide guides or hints as to how to manage those cases where JS is unavailable. Maybe another article ?

    An article on this, and also on how to go about ajaxifying a website, while still retaining functionality wihtout JS would be great.

    0
  23. 23

    Non js versions are actually fairly straightforward. You just have to make sure it works without javascript first. After that you can unobtusively add the eye candy with javascript.

    For a very basic example check the technical terms on http://hotfusion.org (dutch) with and without javascript on.

    0
  24. 24

    Nice collection – but these examples are an accessibility nightmare – navigating by using the keyboard alone… I think not.

    1
  25. 25

    When designed, developed and used properly, modal windows are awesome

    They’re like pop-up’s hot sister

    0
  26. 26

    Great collection, I like it.

    And for those who whine about users with JS disabled in their browsers: why the heck they would want to disable JS in the first place? Is it going to make your browser more secure? Is it going to improve usability? Bulls***! For God’s sake, it’s not 1995 anymore! We have moderns computers, modern browsers and modern solutions to enhance user experience (AJAX), so why bother trying to disable JS?

    How much of people disable JS in their browsers? What, 2-3%? Well, you know what? Screw them!

    Hey, you don’t need to argue with me, it’s just my opinion.

    3
  27. 27

    SlimBox2 is fantastic for displaying images, it works like a dream and the script is incredibly small – 4K!

    0
  28. 28

    this is awesome!!!

    0
  29. 29

    All these fancy tricks go to waste if people have javascript disabled in their browsers.

    0
  30. 30

    Great article, love modal windows and havent found many websites that showcase some of the best. Great tips too…..Thanks

    0
  31. 31

    Really, really informative! So timely :D

    Thank you so much and keep it up! I absolutely love this article. This will save me some time on designing this project.

    0
  32. 32

    Cool article I tend to use lightbox just for images, these are some great ideas, thanks!

    0
  33. 33

    Like David (#19) ! Shadowbox is the best modal box script i’ve ever used. It can be combine with jquery, mootools, prototype or alone (without any JS library). All in one small (and smart) script ;) !

    0
  34. 34

    Great collection! But you left out ASP AJAX Modal popup, which like the Jquery class is very extensible.

    0
  35. 35

    I agree that modal windows (and any other jQuery/MooTools/etc effects) should be used sparingly, and never rely on them for functionality. Always keep graceful degredation in mind.

    0
  36. 36

    I’m a convert to modal windows, but calling them accessible is dubious. The one I’ve just integrated into a site is not screenreader compatible when it’s in focus.

    0
  37. 37

    i use Impromptu, its built for modal forms and collects all of the form input values for you to process http://trentrichardson.com/Impromptu/index.php

    0
  38. 38

    Whenever I get up one of these windows it’s like they crave more CPU-power than Crysis, Final Cut Pro, 3Dsmax and Maya combined even on my newest PC. They severly lag the whole browser window, make scrolling unfathomably jerky, limit your choices considerably while they are up in a cramped prison-sort of way, and just feel generally awkward in all the browsers I have tried. When we all have 65536 CPUs, 8 hojillion GB ram and another bajillion GB internet connection I think they’ll work properly.

    Just keep it simple for now.

    -2
  39. 39

    I have to agree with other comments regarding accessibility – modals are a great step forward in making web applications more like their desktop counterparts, but some work still needs to be done to make them screenreader and keyboard friendly.

    As for the JS issue, even if only 2-3% don’t have it (although I would question those stats – doesn’t IE7 have JS turned off by default?), I would feel very nervous putting such an important element as a contact form within a method that end users can unwittingly disable. Most front end developers these days wouldn’t dream of using JS image rollovers for their navigation, but without progressive enhancement, don’t modals amount to the same kind of thing?

    As for forms or other elements loading quicker in a modal compared to within a straight page (where repeated elements such as a header, menu and footer will be already cached) I’m not so sure…

    Techniques such as these are only going to increase in popularity, so there is the danger that they become the new ‘tables’ of web development if not implemented properly.

    0
  40. 40

    I’m suprised you missed lightview, in your list. I would have to say it’s one of the more popular ones being used right now.

    0
  41. 41

    IHello,

    The big issue I have seen with some of these lightbox effects is that the windows disappear when you click outside of them (the darkened or faded out area). This is a problem when a user is trying to fill out a form then accidentally clicks outside the form area only to lose all the data they had entered up to that point.

    I am no Javascript expert, but does anyone know how to make these windows persistent?

    Fantastic article, thanks!

    0
  42. 42

    Christian Watson

    May 28, 2009 6:30 am

    With regard to the section on embedding PDFs I disagree that modal windows are an appropriate way to do this.

    Far from enhancing the user experience, they actually make it worse as you can’t navigate to another page on the web site without closing the modal window and the PDF.

    It is far more convenient for the user if the PDF opens in a new window or tab so that they can still use the web site and view the PDF.

    In addition, PDFs are often large documents and so it is better for them to open in the background in case they take a while to download.

    0
  43. 43

    great collection !

    0
  44. 44

    Whoops, the ‘jQuery Alert Dialog’ link goes to the ‘nyroModal jQuery Plug-In’ plug in page.

    0
  45. 45

    I sugest that you do an article of the worst usage of modal windows ^_^

    0
  46. 46

    Thanks for the article.

    Here’s a really great cross browser modal window (jQuery plugin) a friend of mine wrote. http://www.morecowbell.net.au

    It kicks butt.

    0
  47. 47

    For Mootools 1.2, you’ve got also the multibox 2 plugins, very useful :-)
    http://www.liamsmart.co.uk/Downloads/multiBox/

    0
  48. 48

    Couple of things.

    Modal dialogs in desktop applications have tended to be usability nightmares, obscuring data needed to fill out the dialog properly or just generally getting in the way of performing the desired task, getting lost behind other windows/elements, or being too easily dismissed. When talking about modal or semi-modal dialogs in a web page/application we should probably define what’s a best practice and in what circumstances you absolutely shouldn’t use modal dialogs.

    Regarding disabled JavaScript – If you have a site that get’s 500 visitors a month then pissing off 10 people because you didn’t account for JavaScript being disabled might not be a big deal. However, if you have millions of visitors a month then you are pissing off 20,000 people or more and losing more revenue than it would take to just make sure it degrades properly from the start.

    Repeat after me “Progressive Enhancement” – jQuery was built for this kind of stuff. It’s stupid simple. Make a page -> Does it work? Yes -> Add CSS -> Does it work? Yes -> Add JavaScript -> Does it work? Yes -> Turn off CSS -> Does it still work? -> Yes -> Turn off JavaScript -> Does it still work? Yes – WIN!!!

    Another really important part in working with progressive enhancement is error handling. For instance right now I can’t login to Digg because some required element that shows the modal login box is failing with a big fat error. There should be error handling there that redirects to a separate login page if the modal fails.

    2
  49. 49

    Exit strategy url wrong:
    webdesignerwwall… > webdesignerwall….

    0
  50. 50

    Another vote for shadowbox – the only one I found that worked fully and consistently cross browser ie6/7/8, ff 1.5/2/3, safari, opera and chrome with imagery, video and html content. nice hooks and callback implementation too.

    0
  51. 51

    Coincidentally, I started using Jquery & thickbox yesterday to display some simple linked content. Although it’s not normally used for text content, it turned out pretty good. I’d recommend ThickBox to everyone.

    0
  52. 52

    @Marc (comment #42):

    I’m surprised it took 42 comments to even mention lightview! I purchased a license for my website, because it is really a great resource, and easy to use.

    0
  53. 53

    as usual the you guys rock

    0
  54. 54

    You forgot MochaUI framework which has some awesome cross browser windowing elements. We use it heavily for all our modal windows.

    http://www.mochaui.com/

    0
  55. 55

    although the premise of Modal windows isn’t flawed, and they could aid navigation and user-experience….

    Almost every time I’ve seen them implemented it has been no end of frustration. They take the power away from the website user, and demand that you deal with them immediately BEFORE accessing the rest of the page you’re looking at.

    Half the time they aren’t coded to render properly in multiple browsers, so if it’s something ABSOLUTELY NECESSARY that I have to do, I simply have to switch browsers to complete it, or log in, or whatever it is.

    It’s also frustrating that I have to hunt for that stupid little x [if it has one] to get rid of it. There ought to be stricter usability laws in place, allowing full keyboard control [and things like escape ALWAYS get rid of modal windows would be perfect] like they do in europe.

    I wish people would wait until they have a perfect solution before messing up my other-wise great web experience with an undercooked poorly conceived or controlled modal script.

    The only time I’ve seen it done well, and all hail Daniel Burka and Kevin Rose, is on Digg, the ‘please login’ modal is PERFECT.

    0
  56. 56

    Has anyone found a good looking modal dialog box that supports resizing?

    Or can any of them be modified to support resizing?

    0
  57. 57

    nice list but why is it always so long with this guy?

    0
  58. 58

    This is good… But they left out one of the better and, sadly, lesser known modular boxes… Floatbox:
    Floatbox.

    0
  59. 59

    One issue that can occur with using modal windows with login or registration boxes is that it is difficult to secure the modal boxes. Some clients are very sensitive to this information and require that any registration or login function be secure (https:// or similar). This is simple if every page that has this functionality is also secured. However, if you have a normal site, having every page be secure can be difficult or inconvenient, and for functionality like logins to be available on every page a method of securing the modal boxes in and of themselves needs to be developed in a simpler format (current secure AJAX solutions are often very complicated).

    And I have to put my vote in for using Progressive Enhancement when deciding to use modal boxes for key functionality – create the ‘normal’ page and then enhance the functionality for those who are able to use it by superseding the main link with the modal box. And for those wondering about JavaScript usage, estimates run from 5 – 20% of users having JavaScript disabled (everyone from the blind using screen readers to people using IE at HIGH security settings).

    0
  60. 60

    A nice collection of modal dialogs!

    Another option: SimpleModal – a lightweight jQuery plugin that provides a simple interface for creating modal dialogs.

    SimpleModal has been used by many, including companies like tivo.com, usatoday.com, monster.com and woot.com.

    1
  61. 61

    In my opinion the lightbox script should only enable you to open a lightbox/modal window. The styling of the interface should not be part of the script, but should be left to the CSS of the front-ender. As such solutions are scarce, we’ve decided build start building “the perfect box”. Any suggestions? Feel free to drop them of

    0
  62. 62

    overlays can be modal or non-modal.

    0
  63. 63

    Lorenzo Bondioni

    May 28, 2009 11:50 pm

    Very cool post…great collection.tnxs

    0
  64. 64

    Check out Silverlight 3 implementation of a Modal Window (they call it Child Window):

    http://silverlight.codeplex.com/Wiki/View.aspx?title=Silverlight%20Toolkit%20Overview%20Part%204

    0
  65. 65

    Error in Url for jQuery Alert Dialog, it points to nyroModal jQuery Plug-In.

    0
  66. 66

    Modal windows are great if they enhance the functionality or help to – unobstrusively – guide the user, but they also can annoy the user if used wrongly. I especially dislike modal window logins which render my password manager useless (the same is true for flash logins).

    0
  67. 67

    You guys forgot the best free lightbox on the internet!!! Its clean, simple, and coded extremely well… it also does a lot of the stuff people in the comments are complaining about… Anyway, thought i’d share. http://colorpowered.com/colorbox/

    0
  68. 68

    Daniel Buchner

    May 29, 2009 2:39 pm

    How on earth do you leave out Mocha UI? http://www.mochaui.com/demo

    0
  69. 69

    “Embedding PDFs”
    Seriously? You would embed something as important as your Resume / CV inside an HTML document?
    Surely the problems of handling PDFs is big enough already without that! Just imagine what it would look like on a browser, (like some of mine) that is configured to download/open the PDF in an external reader – at best you would get a blank page!

    0
  70. 70

    From where I can get a cross browser modal box script for my website. Please make a post for FREE script in traditional javascript and in jquery for modal boxes.

    Thanks

    -2
  71. 71

    Mahbub is right, Colorbox is really good…wonder why it didn’t make the list?

    0
  72. 72

    We built a modal JS class for use at graze.com – fantastic UI device, comes in useful all over the place!

    0
  73. 73

    to dteoh: try Visual Lightbox, visuallightbox.com. It resizes an overlay to fit browser window. It also has some very nice designs for overlays

    0
  74. 74

    Modal Windows In Modern Web Design – aka… Douche Boxes

    0
  75. 75

    I was looking for showcase like this entire day, thx Matt.

    0
  76. 76

    i get what i am trying to search from ur blog.thanks its very great full to me

    0
  77. 77

    Excellent…and I love every bit of it.
    Great examples…learned a lot.
    Thanks.

    -1
  78. 78

    Real web 2.0 style. Great hints you gave me. I’m a lucky guy cause I’m using Vbulletin, where most of the new designs were used. There are lots of sites like this Rockabilly Forum where you can see, how usability and Design can work perfectly together.

    0
  79. 79

    Hi all,

    Try out TopUp! It is a Javascript library to create modal boxes. You can either host the JS and image files yourself or just use one Javascript include, nothing more! It uses sprites to reduce the amount of image requests. It has a Apple-like dashboard and quicklook layout. Also, it offers you to keep your HTML code clean.

    0
  80. 80

    Does anyone know a tutorial for Modal contact forms? Im knew to this but I can already see how it would be useful, thanks!

    0
  81. 81

    So am I the only one who feels stupid for implementing jQmodal without testing how it performs if the folks running the browser have JavaScript turned off? hmmm?

    Oh, I guess that 20% of my possible prospects don’t need to fill out a web form to download our software, we didn’t need the money anyway.

    Something I learned late in this game, test on all browsers, have someone else test on all browsers, and, tada, test without JavaScript turned on. Then you can discover the royal mess you put yourself into…

    0
  82. 82

    A great reference guide. Thanks Matt.

    0
  83. 83

    awesome inspiration , just what I neede
    ~cheers!

    0
  84. 84

    nice article..

    0

↑ Back to top