Menu Search
Jump to the content X

Modal Windows In Modern Web Design


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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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 Link

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.


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


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.


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.


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.


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.


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


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.


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


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


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.


Showcase of Modal Windows Link

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


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.


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 345
A good example of a window with the background faded out. Multiple pages of content are integrated here in a single modal window.


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


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


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.


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.


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 Reference61
A very simple modal window with a strong shadow that adds a lot of depth.


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.


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


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


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.


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.


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.


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.


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


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 Link

You may be interested in the following related posts:


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87

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

  1. 1

    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.

  2. 2

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

  3. 3

    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.

  4. 4

    Abrishca Digital Media

    May 27, 2009 4:27 pm

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

  5. 5

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

  6. 6

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

  7. 7

    Great article, very useful.

    One mistake: Screenshot for Webdesignwall’s use of modal windows links to this:

    An extra ‘w’ in ”wall’

  8. 8

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

  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.

  10. 10

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

  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 ( I use it all over my site ( 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 ( 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.

  12. 12

    Nice list.

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

  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.

  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

  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.

  16. 16

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

  17. 17

    Search box from is wonderful! Well done!

  18. 18

    Nice collection. I love modal boxes. I have also written a tutorial on how to build one by yourself:

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

  20. 20

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

  21. 21

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

  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.

  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 (dutch) with and without javascript on.

  24. 24

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

  25. 25

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

    They’re like pop-up’s hot sister

  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.

  27. 27

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

  28. 28

    this is awesome!!!

  29. 29

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

  30. 30

    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.


↑ Back to top