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.

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.

6

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.

7

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.

8

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.

9

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.

10

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.

11

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.

12

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 Lightbox13
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.

14

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

16

Facebook Image/Content Viewer17
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.

18

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

20

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

22

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

24

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

26

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

28

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

30

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

32

jQuery Expose33
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.

34

Showcase of Modal Windows

Grooveshark35
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.

36

Digg37
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.

38

Apple Movie Trailers39
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.

40

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

42

Espionage43
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.

44

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

46

Behance47
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.

48

Facebook49
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.

50

KISSmetrics51
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.

52

Nasi Briyani Lounge53
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.

54

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

56

Capo57
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.

58

Accept-Ideas59
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.

60

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

62

Evernote Web Application63
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.

64

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

66

Viewzi Corporate67
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.

68

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

70

The Resumator71
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.

72

Checkout App73
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.

74

Pixelmator75
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.

76

Ballpark77
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.

78

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

80

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

82

Further Resources

You may be interested in the following related posts:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
  2. 2 http://www.smashingmagazine.com/2009/04/23/help-elements-design-showcase/
  3. 3 http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/
  4. 4 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  5. 5 http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/
  6. 6 http://wpcoder.com/
  7. 7 http://www.versionsapp.com/#
  8. 8 http://www.footnote.com/search.php?query=john%20hancock
  9. 9 http://collabfinder.com/
  10. 10 http://www.realmacsoftware.com/rapidweaver/themes/index.php
  11. 11 http://www.webdesignerwwall.com/trends/modern-sitemap-and-footer/
  12. 12 http://www.bohemiancoding.com/fontcase/index.html
  13. 13 http://fancy.klade.lv/home
  14. 14 http://fancy.klade.lv/home
  15. 15 http://www.lokeshdhakar.com/projects/lightbox2/
  16. 16 http://www.lokeshdhakar.com/projects/lightbox2/
  17. 17 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  18. 18 http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm
  19. 19 http://woork.blogspot.com/2008/01/lightbox-using-mootools-and-pathfusion.html
  20. 20 http://woork.blogspot.com/2008/01/lightbox-using-mootools-and-pathfusion.html
  21. 21 http://nyromodal.nyrodev.com/
  22. 22 http://nyromodal.nyrodev.com/
  23. 23 http://nyromodal.nyrodev.com/
  24. 24 http://nyromodal.nyrodev.com/
  25. 25 http://stickmanlabs.com/lightwindow/
  26. 26 http://stickmanlabs.com/lightwindow/
  27. 27 http://prototype-window.xilinus.com/
  28. 28 http://prototype-window.xilinus.com/
  29. 29 http://prototype-window.xilinus.com/
  30. 30 http://prototype-window.xilinus.com/
  31. 31 http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
  32. 32 http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
  33. 33 http://www.flowplayer.org/tools/expose.html
  34. 34 http://www.flowplayer.org/tools/expose.html
  35. 35 http://listen.grooveshark.com/
  36. 36 http://listen.grooveshark.com/
  37. 37 http://digg.com/
  38. 38 http://digg.com/
  39. 39 http://www.apple.com/trailers/universal/fastandfurious/
  40. 40 http://www.apple.com/trailers/universal/fastandfurious/
  41. 41 http://www.apple.com/imac/design.html
  42. 42 http://www.apple.com/imac/design.html
  43. 43 http://www.taoeffect.com/espionage/
  44. 44 http://www.taoeffect.com/espionage/
  45. 45 http://marketcircle.com/daylite/index.html#
  46. 46 http://marketcircle.com/daylite/index.html#
  47. 47 http://www.behance.net/Gallery/Positive-Hype/55599
  48. 48 http://www.behance.net/Gallery/Positive-Hype/55599
  49. 49 http://www.facebook.com/
  50. 50 http://www.facebook.com/
  51. 51 http://www.kissmetrics.com/
  52. 52 http://www.kissmetrics.com/
  53. 53 http://www.nasibriyanilounge.com/
  54. 54 http://www.nasibriyanilounge.com/
  55. 55 http://www.pixelightcreative.com/
  56. 56 http://www.pixelightcreative.com/
  57. 57 http://supermegaultragroovy.com/products/Capo/
  58. 58 http://supermegaultragroovy.com/products/Capo/
  59. 59 http://sourcen.accept-ideas.com/
  60. 60 http://sourcen.accept-ideas.com/
  61. 61 http://typedeskref.com/
  62. 62 http://typedeskref.com/
  63. 63 http://www.evernote.com/
  64. 64 http://www.evernote.com/
  65. 65 http://www.geticeberg.com/
  66. 66 http://www.geticeberg.com/
  67. 67 http://corp.viewzi.com/
  68. 68 http://corp.viewzi.com/
  69. 69 http://www.mailchimp.com/
  70. 70 http://www.mailchimp.com/
  71. 71 http://www.theresumator.com/home/tour/
  72. 72 http://www.theresumator.com/home/tour/
  73. 73 http://www.checkoutapp.com/
  74. 74 http://www.checkoutapp.com/
  75. 75 http://www.pixelmator.com/
  76. 76 http://www.pixelmator.com/
  77. 77 http://www.getballpark.com/
  78. 78 http://www.getballpark.com/
  79. 79 http://www.backpackit.com/?source=37signals+home#/
  80. 80 http://www.backpackit.com/?source=37signals+home#/
  81. 81 http://blog.guifx.com/category/downloads/
  82. 82 http://blog.guifx.com/category/downloads/
  83. 83 http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/
  84. 84 http://www.smashingmagazine.com/2009/04/23/help-elements-design-showcase/
  85. 85 http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/
  86. 86 http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  87. 87 http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    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
  2. 52

    Exit strategy url wrong:
    webdesignerwwall… > webdesignerwall….

    0
  3. 103

    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
  4. 154

    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
  5. 205

    @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
  6. 256

    as usual the you guys rock

    0
  7. 307

    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
  8. 358

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

    0
  9. 409

    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
  10. 460

    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
  11. 511

    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
  12. 562

    overlays can be modal or non-modal.

    0
  13. 613

    Lorenzo Bondioni

    May 28, 2009 11:50 pm

    Very cool post…great collection.tnxs

    0
  14. 664

    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
  15. 715

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

    0
  16. 766

    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
  17. 817

    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
  18. 868

    Daniel Buchner

    May 29, 2009 2:39 pm

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

    0
  19. 919

    “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
  20. 970

    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
  21. 1021

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

    0
  22. 1072

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

    0
  23. 1123

    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
  24. 1174

    Modal Windows In Modern Web Design – aka… Douche Boxes

    0
  25. 1225

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

    0
  26. 1276

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

    0
  27. 1327

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

    -1
  28. 1378

    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
  29. 1429

    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
  30. 1480

    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
  31. 1531

    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
  32. 1582

    A great reference guide. Thanks Matt.

    0
  33. 1633

    awesome inspiration , just what I neede
    ~cheers!

    0
  34. 1684

    nice article..

    0

↑ Back to top