CSS Overlay Techniques

There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique’s styles with their pros and cons.

By Sara Soueidan in Articles on

Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can.

We can decide intelligently when to keep the user on the page and model his process. One way to keep the user on the same page is by trying to include some of the experiences in the context of the current page, by displaying a “mini page”, or a pop-up dialog, in a lightweight layer over the current page. This lightweight layer is what we call an overlay.

Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. They can be activated directly by user events (e.g., clicking on an action, hovering over objects) or be provided by the web application at various stages in the completion of an action.” — Designing Web Interfaces

When the user interaction is only accepted in the pop-up modal, a Lightbox effect is usually applied and the rest of the page is dimmed, indicating its inactivity.

The aim of this tutorial is to introduce you to several techniques that can be used to create this dimmed overlay with CSS, and determine the pros and cons of each technique as we go over them.

Technique #1: Absolutely positioned element

The first way that an overlay can be created is by absolutely positioning an HTML element on the page. There would be an empty div in the markup, and with CSS this div is positioned absolutely and given a high z-index value to make sure it stays on top of all other elements on the page, except the modal which is opened on top of this overlay, which will get a even higher z-index than the overlay.

<html>
  <body>
   <div class="overlay"></div>
   
  <body>
<html>

Supposing we have already added an empty div to the markup and given it a class .overlay, the CSS to position this overlay on the page is:

html, body{
  min-height: 100%;
}
body{
  position: relative;
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}

The code is very simple, but there are a few things to be aware of when using this technique.

First, you need to make sure that the overlay is positioned absolutely with respect to the body. So, if the overlay is contained in another div for example and that other div has a position set to relative, then the overlay will be positioned absolutely with respect to its container, not the page body. So you have to either let the overlay be a direct child node of the body, or make sure none of its ancestors has a position set to relative.

Also, you need to make sure the content of the page expands down to the bottom of the viewport or more, because the body expands to fit the height of its content (assuming the content is not positioned absolutely, of course), and if there isn’t enough content to expand the body height to the bottom of the viewport, then the overlay, which is getting 100% the height of the body, won’t reach the bottom of the viewport either, and so it won’t be covering it.

To avoid this, and not have to worry about the amount of content on the page, and still get an overlay which covers the entire viewport size, you should set a height on the root html element and the body. There is another thing to remember, though, when you set a height on the html and body elements:

If you give the html element a height of 100% (100% height relative to the viewport), and give the body a 100% height too (which is computed relative to the root html), then you’re setting the height of both of them to be 100% the height of the viewport, and so, no matter how far down the content of the body extends, their height remains equal to that of the viewport, and so will the height of the overlay. In this case, if you scroll down the page, the overlay will scroll up and you’ll see the content below it without an overlay, as if the overlay’s been cut off.

The solution here is to set a minimum height on the root element and on the body instead of setting a height value, which is preferable in most situations. By setting a minimum height, you’ll make sure that their height reaches the bottom of the viewport, and increases as the content increases. And lastly, to make the overlay’s height increase and have it expand to cover all the content on page scroll, you must set a position:relative; on the body so that the overlay’s height expands as the body’s height expands.

Another thing to note about this technique is not to use unnecessarily high z-index values. A lot of developers tend to use very high z-index values like z-index: 999999; when they position an overlay, or any other element, on top of other elements on a page. This is not necessary. Most of the times a z-index value of 10, or sometimes even less, is more than enough to keep an element on top of others on the page. You just need to know if there are other elements getting a z-index, and if there are, just set the z-index of the overlay higher than the highest of the other elements.

And finally, you should also remember that with this technique you’re adding an empty div to your markup, which of course is non-semantic.

An advantage of using this technique is that it is supported in all major browsers and also older ones, down to IE8.

I have set up a pen on Codepen so you can test the result of this technique here. Try replacing the min-height on the html and body with height, or removing the relative position from the body to see how the overlay gets cut off at the bottom when you scroll.

See the Pen Creating an Overlay with an Absolutely Positioned Element by Sara Soueidan (@SaraSoueidan) on CodePen

Technique #2: Element with fixed position

The second way you could add an overlay is very similar to the previous one, and uses the same .overlay element in the markup, but instead of positioning the overlay absolutely, you give it a fixed position, and a full width and height to cover the entire viewport. And because the overlay in this case is fixed, no matter how far down you scroll, the overlay will stay in position, covering the whole viewport area, which if of course what we want.

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
}

Unlike absolutely positioned elements which are positioned relative to a container with a position:relative, fixed elements are positioned relative to the viewport:

Whereas the position and dimensions of an element with position:absolute are relative to its containing block, the position and dimensions of an element with position:fixed are always relative to the initial containing block. This is normally the viewport: the browser window or the paper’s page box. — W3C Wiki

Normally, when using fixed position, you don’t have to worry about where to put the overlay div in the markup. No matter where you put it, it’ll get a fixed position with respect to the viewport, unless you’re transforming one of the overlay’s ancestors, in which case the transformed element creates a containing block for all its positioned descendants, even those that are getting a fixed position. This fact has tripped off a lot of developers, including myself. So, if you ever find yourself fixing an element and the result is not as you expected it to be, check for whether this fixed element is a descendant of an element which is being transformed.

See the Pen Creating an Overlay with an Element with Fixed Position by Sara Soueidan (@SaraSoueidan) on CodePen

Again, with this technique we’re adding an empty element to the markup, which is against markup semantics. So how can we avoid this?

Technique #3: Using a pseudo-element

In order to avoid adding empty elements into our markup, we can use pseudo-elements to create the overlay instead.

The styles and considerations in this technique are pretty much the same as the previous ones, except that instead of styling and positioning an empty element with a class .overlay, we’ll be styling the :before or :after pseudo-element on the body.

html, body {
  min-height: 100%;
}

body {
  position: relative; /* needed if you position the pseudo-element absolutely */
}

body:after {
  content: "";
  display: block;
  position: fixed; /* could also be absolute */ 
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.2);
}

You can choose to position the pseudo-element absolutely with respect to the body, or give it a fixed position. Either way you choose, you’d have to consider the points we mentioned in the first two techniques.

And here’s the pen for this example:

See the Pen Creating an Overlay with a Pseudo-Element by Sara Soueidan (@SaraSoueidan) on CodePen

An important thing to note here is that transitions on pseudo-elements still don’t work on Safari and Mobile Safari, so this is a huge drawback if you’re going to use a pseudo-element to create the overlay, because you won’t be providing your users with entirely smooth overlay effects. This is an important thing to keep in mind when you’re creating web apps that you want to feel like native apps on all devices and smartphones.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Technique #4: Applying a large outline to a modal

This technique does not require any extra elements to create the dimmed background overlay. Instead, you can apply a large outline to the modal window to achieve the dimming effect over the rest of the page.

Credit for this technique goes to Lea Verou, she was the first one to share it via a tweet on twitter.

So suppose you have an element in the markup representing the modal window that will appear on the overlay:

<div class="modal">I'm the Modal Window!</div>

When the modal pops up on top of other elements on the page, you can apply a big outline to it which will act as the dimming layer “behind” it. The outline is usually set to a very large value, but it only needs to be large enough to make sure it covers the whole viewport area no matter what the size of the viewport is.

.modal {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    line-height: 200px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: #f1c40f;
    text-align: center;
  
    /* needed styles for the overlay */
    z-index: 10; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}

Of course, you don’t want to forget to set the z-index for the modal to keep it on top of other elements on the page.

See the Pen Creating an Overlay with an Outline by Sara Soueidan (@SaraSoueidan) on CodePen

One thing to keep in mind here when you use this technique is that the dark overlay behind the modal will not prevent mouse interactions with the other elements on the page. You can not prevent the pointer and mouse events from firing if you click on other elements on the page, which may be an undesirable effect in most cases. So you have to consider whether you want this effect for your app or not before you decide on whether or not to use this technique.

Also note that an outline is drawn outside of any borders and it will not follow a border-radius. If you have a border radius like we have in the examples, you’ll notice a gap. So this might not be a good choice if you use a modal window with a border radius.

Technique #5: Applying a large box shadow to a modal

The only difference between this technique and the previous one is that instead of applying a large outline to the modal, we’re going to apply a large box shadow to it.

.modal {
    /* some styles to position the modal at the center of the page */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    line-height: 200px;
    height: 200px;
    margin-left: -150px;
    margin-top: -100px;
    background-color: #f1c40f;
    text-align: center;
    border-radius: 5px;
  
    /* needed styles for the overlay */
    z-index: 10; /* keep on top of other elements on the page */
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}

The result is also, of course, pretty much the same.

See the Pen Creating an Overlay with a Large Box Shadow by Sara Soueidan (@SaraSoueidan) on CodePen

Of course, the dark overlay resulting from this technique also does not prevent the interaction with the rest of the elements on the page behind the modal.

Now, despite mentioning this technique as one of the possible ways to create overlays, I strongly advise you not to use it to create overlays. Even more, don’t use too many box shadows on your web pages/apps in general.

Box shadows in combination with other styles like border-radius or when heavily used can cause a huge performance bottleneck, and can even render your app unusable on smartphones and tablets, as they tend to become very unresponsive with box-shadow-heavy applications.

Box shadows are costly to render, and it gets even worse when large box shadows are applied to fixed elements, as it can force the browser to redraw large portions of the page when scrolling. This is particularly bad in Firefox, where fixed elements and large CSS box shadows can bring it to a crawl, slowing it down to 2 frames/second for scrolling and DOM manipulation.

So, try to avoid using large box shadows in your applications or too many of them, as it will have a significantly bad impact on your app’s performance. If you find yourself in a situation where you need to use a lot of box shadows, you can at least try to remove those box shadows on smartphones and tablets by using one of the feature-detection techniques out there and providing fallback styles for these devices.

Technique #6: Using the HTML <dialog> element

The last technique we’ll talk about is a fairly new one, and a really awesome one! And it is the most semantic of all techniques if you’re creating an overlay for a dialog box or modal window.

Modals can now be easily created and styled using the HTML dialog element. The dialog element provides in-page dialog box functionality. A dialog exists in the DOM tree and can be styled using ordinary CSS.

The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window. —WHATWG HTML Spec

The HTML dialog element has four main features, three of these features are what we’re most interested in when creating overlays (the fourth one is not yet implemented at the time of writing this article):

  1. By default, a dialog is centered vertically in the viewport when opened. It is still absolutely positioned so it can be scrolled away. The viewport centering occurs regardless of the dialog’s position in the DOM tree.
  2. Dialogs can be modal. When a modal dialog is opened, it blocks the rest of the document. There is a “pending dialog” stack to handle the case of multiple modal dialogs.
  3. A new stacking layer on top of the existing CSS stacking contexts handles “always on top” behavior. Dialog and the Fullscreen spec both use the top layer. Modal dialogs reside in the top layer. So you don’t need to worry about setting a z-index manually to keep your modal on top of other elements on the page.

Pretty awesome, right? The dialog element is centered by default, but as mentioned in the first point, it uses absolute positioning, so it can be scrolled away. You can override the default absolute position by setting the position to fixed in your style sheet. If you do decide to change the position to fixed, you’ll also have to set the top and left values and center it as well.

The dialog element can be placed anywhere in the DOM.

<dialog class="modal">This is the dialog!</dialog>

It can be styled just like you would style any other block-level element.

.modal{
  /* arbitrary styling */
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  height:200px;
  width:300px;

  /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
  position:fixed;
  top:50%;
  left:50%;
  margin-left: -150px;
  margin-top:-100px;
}

The dialog element also comes with a pseudo element called ::backdrop, which allows you to style the background behind a modal, thus creating the dimming overlay effect that we created in the previous five techniques, only this time, you can create that overlay easily by styling the pseudo-element which comes by default with the dialog element.

So, to create an overlay effect using the HTML dialog element, you just apply a background color to its associated backdrop pseudo-element and position it to cover the area of the viewport like we did in a previous techniques:

.modal::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
}

Here’s how the result would look like:

dialog-demo

And that’s all you need to create an overlay using the dialog element!

To make working with it even easier, dialog comes with an API which makes showing and hiding a modal a piece of cake, using functions like show() and hide(), among others.

You can learn more about the dialog element and its API and see different live examples in this demo by Eiji Kitamura. The demo runs in a polyfill mode when you’re viewing it in a browser that does not yet support the dialog element.

Final Words

I think we’ve covered pretty much all techniques that you can use to create a page overlay for modal windows. As you probably have guessed, the last technique using the dialog element is the best one for creating modal window or dialog overlays, but at the time of writing this article, it is only supported in Chrome Canary, behind a flag, with a polyfill available. So you need to be careful about browser support if you attempt to use it today. But once support for it has been added in all major browsers, it will be the best way to create page overlays, with an awesome bunch of features available to work with it.

I hope you liked this article and find it useful. Thank you for reading!

Do you know other techniques for creating overlays in CSS? If you do, make sure you share them in the comments below!

Sara Soueidan

Sara is a Lebanese freelance front-end web developer and speaker, specializing in semantic markup, CSS, SVG, and progressively enhanced, responsive design, with a strong focus on accessibility and performance. She is the author of our CSS Reference and has co-authored the Smashing Book 5, a book that covers time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. Sara also runs in-house workshops about SVG and about building accessible UI patterns. Her client list includes Netflix, The Royal Schiphol Group @ Amsterdam Airport, TELUS Digital, and more. Learn more about some of her work or hire her.

Circular SVG Text Animation

WebGPU Reaction-Diffusion Compute Shader demo screenshot

Reaction-Diffusion Compute Shader in WebGPU

Grid Item Reveal Animation on Hover

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 104

Comments are closed.

  2. Nice technique Sara, however, the JS Bin embed doesn’t work in my browser, it works when I open it in new tab..

    *I don’t know why, maybe my internet connection..

  3. Sometimes is useful to avoid body scrolling. How it makes with the best practice? Set overflow to hidden with JS?

    • I’ve never tried it before, but I’m guessing that if the overflow:hidden on the body would remove the scrollbar, and there are ways in Javascript to prevent mouse scrolling, so I think it’s doable. You would have to try it. 🙂

  4. I’m already stopping the page from scrolling using
    .modal-on body { height: 100%; overflow: hidden; }

    But that doesn’t stop background scrolling on iOS (Android is fine). Does anyone have a CSS solution, or am I going to have to do some awful JS hacking?

    • If you set a height on the .modal and set the overflow-y to “scroll” then that should do it. 🙂

  6. I’ve used number 1 but I’m partial to using the before pseudo element, though I see one downside: I don’t think it has a click event, so you can’t close the model by clicking the overlay, or can you?

    • Using Javascript you can close the modal by clicking “anywhere outside it”, which kind of simulates the “click on overlay to close modal” functionality. =)

    • Using Javascript you can close the modal by clicking “anywhere outside it”, which kind of simulates the “click on overlay to close modal” functionality. =)

      How would you do that, exactly?

  7. With the position:fixed method, rather than setting width and height to 100%, you can just set all four positioning co-ordinates to 0; top:0, bottom:0, right:0, left:0. This will cause the overlay to fill all available space.

    • It’s pretty much the same. You can either set the height without using bottom:0; or use the top left bottom right positions without setting the height. Same result. =)

  8. Another thing to note about this technique is not to use unnecessarily high z-index values. A lot of developers tend to use very high z-index values like z-index: 999999; when they position an overlay, or any other element, on top of other elements on a page. This is not necessary. Most of the times a z-index value of 10, or sometimes even less, is more than enough to keep an element on top of others on the page.
    What would be the downside of using (for example) 10000 instead of 10? I can’t think of any. I know the upside though: there is at least one library (jQWidgets) that uses z-indices of +- 8000, so 10 would not work.
    If you know your highest z-index is 5, then 10 would be fine of course, but I would rather use 10000 and be sure it always works than use 10 and have a chance it fails. That is, unless you can provide a reason why a lower value would be better (in terms of performance or whatever)

    • You kind of replied to your own answer in your comment. =) Like I said in the article, devs should not use “unnecessarily high” z-index values. Meaning that if you can avoid them, i.e u know the structure of the site and the z-indexes provided, then you don’t have to use a high one, and if you know you’re using a library like the jQWidgets you mentioned that uses high z-index values then of course you’d use higher ones if you need your content to be on top of the other ones.

      I don’t have a lot of information about whether high z-index values affect performance, but I do know that setting high values on “dynamic” content or if you’re constantly changing z-index values, then the browser will need to recalculate the values every time, which may cause a performance hit. I’ll try to look into this more later.

      I always try to “model” the page layouts I have as real-life models, and if you think of it that way, then placing an overlay like hundreds of meters above the rest of the model does sound unreasonable, right? but again, that depends on the structure and on the rest of the elements on the page, and on other resources that will be added and may or may not have high z-index values too.

  9. Nice to know about element, thanks for sharing.

    Anyway I’m mostly using the technique #4, but to vertically-center the layer I basically use

    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);

    So I must not know in advance the exact height of my layer. 🙂

    About the outline property, I’d like to know if someone else experienced a strange issue with higher values – like 9999px – and random crashes of Safari on iPad (1,2 and mini with iOs5, 6 and 7.0.3).

    • So simple, I haven’t thought of that before. Great way if you are absolutely sure, the modal content will not exceed the page content, otherwise a user won’t be able to see the top and bottom bits of it. But apart from that, awesome!

  10. .overlay::backdrop{ in the last snippet should be .modal::backdrop {, right?

    There’s another related technique used by Vex, a dialog library I authored. It uses an .overalay sibling of the dialog content, to allow for more flexibility with CSS animations.

    That way, different dialog themes can animate the overlay in different ways, without being concerned of affecting the content (which is a child element in most modal implementations).

  11. really informative post, thanks for sharing these techniques, some of them are really new to me.

    One thing I want to point out is the technique with position:fixed, the downside of using this one is when the height of the modal is larger than your viewport’s height, then the overflow part will be hidden and you can’t scroll down to see it. Think of marking up a shopping cart list of items where each new item will be added to the bottom, this kind of situation you need to use position:absolutely in order to be scrollable to see the whole item list, or create a wrapper div with a scrollbar . Either way will do the trick.

    • +1! every one should consider using the way that best suits their app. Thanks for pointing this point out 🙂

  13. Nice articel !

    Below is what I use to cover the entire screen.
    The full JavaScript source and demo of my alert and confirm dialogs
    can be found at my website.

    if (vail === null) { vail = document.createElement('DIV'); vail.id = 'VailFromBackend'; vail.style.width = '100%'; vail.style.zindex = -1; vail.style.background = ''; vail.style.visibility = 'hidden'; vail.style.position = 'fixed'; vail.style.top = '0px'; vail.style.left = '0px'; vail.style.opacity = 0.5; vail.innerHTML = '<hr style="margin:0;padding:0;width:1px;height:2000px">'; document.body.appendChild(vail); }

  14. Many thanks for a very informative article. Like many others, my weekend will be spent trying these methods out.

  15. I would caution users that large amounts of box-shadow can cause a significant page delay when loading as well as lag due to page redraws. Use box-shadow with caution.

  16. Nice one Sara. Most of people still don’t know to use center center text align.

    height: 100px;
    line-height: 100px;
    text-align: center;

    I use the same way. =)

    • Hi nooby!

      True, but be careful not to use this technique when the text is more than one line long, that will then cause some of the text to disappear/overflow its container!

    • I agree Sara. =) By the way you are the best author in Codrops, ’cause you answer to our comments. =)))

  19. Hi everyone!

    I just want to add that the styling I gave to the .modal window is arbitrary! Of course there are a lot of ways to style and center modal windows in CSS. This article focuses only on creating the dimmed overlay behind the modal Window.

    Thank you for reading! =)

  25. Just a typo comment: you were referring to the examples as JSBin‘s, but they were made with Codepen 🙂

  27. About “TECHNIQUE #1” , there is a small problem about width. If any element in body has a width more than 100%, the same problem with height will happen, but it is defficlut to sovle it without js.

    • I’ve never been in that situation before but maybe setting min-width:100%; on the html and body would work in this case too (?)

    • I tried min-width:100% in chrome, it doesn’t work, I think the width of a block element is common100%, so it is different from the height. And the min-height:100% seemingly can be delete from css in “TECHNIQUE #1?, because the height of a block element is self-adaption with the elements in it.

    • if add “display: inline-block” to html and body tag, the width can self-adaption (I tried in chrome), because the width of a inline-block element is common self-adaption, it is different from the width of a block element.

    • Deleting min-height from the first technique will make the overlay get cut off when the content of the body does not fill the entire screen.

  32. Remember that Mobile Safari chokes on position: fixed; elements when zooming/unzooming. It’s an intentional design decision on the part of the Safari team and has to do with the special relationship that the browser viewport has with the physical body of the page, but it still tends to throw most designed-for-the-desktop designs for a loop.

  35. Press the “TAB” key when dialog is display, you’ll see that this window is not modal. You must ensure focus can’t leave the dialog. This is a very important accessibility point. This can be fix easily by few lines of javascript.

    Thanks for the post

    • Hi Toh,

      I must emphasize that this post is not about creating fully functional modal windows, it’s about techniques to create the overlay behind that window.

      With that said, the point you mentioned is an excellent note that everyone should keep in mind when creating modal windows, thank you. 🙂

      Cheers,
      Sara

    • Hi Chad,

      Yes that technique also works, but remember that it’s best practice to separate the styles from the Javascript, so it’s not recommended that you add CSS styles from inside Javascript.

      You could for example append that element and give it a class name which will have all those styles in the stylesheet, or, even better, you could use JS only to make sure the height of the overlay covers the screen, although I don’t see that necessary with all the available CSS techniques at hand.

      If a style can be created with CSS then it should.

      Thank you! 🙂

    • Thanks for the reminder of separating the styles from the js. Here is my .js solution now, which was modified from the one shown in the link. I moved all the styling of the #overlay ID into the stylesheet.

      I will play around with these CSS only solutions as well. Thanks for the reply.

      //Overlay
      $(document).ready(function () { var docHeight = $(document).height(); $('#overlay').height(docHeight); $('#viewModal').click(function () { $('#overlay').show(); $('#modalWindow').show(); }); $('#closeModal').click(function () { $('#overlay').hide(); $('#modalWindow').hide(); }); });

  38. He Sara,

    All the techniques shown here are really helpful and interesting. Thanks for sharing this post.

  39. Hey Sara, thanks for sharing these different CSS modal techniques. Especially the element was new to me.

    I am currently considering TECHNIQUE #7, which is simply using: window.alert(), window.confirm(), window.prompt(). These modals come with no strings attached and look great on mobile.

  42. In addition to the performance issues the box-shadow technique could create, using a large value (like 9999px in the example) can cause it to fail altogether. On my particular machine (original retina mbp) changing the value to 1017px and below allows it to show, but anything above that and it’s as if there were not overlay background at all.

  43. Nice work. This is absolutely interesting tutorial. But I want to dissolve the overlay if I click the corner or the background of the overlay. But then, thank you for this informative tutorial.

  44. Awesome, this is just the kind of carefully crafted, thoughtful and taught tutorial that I like – superb job!

  45. What all of these techniques fail to mention is what the effect is on a mobile device. I am completely sick of modal text boxes that don’t have a close button within the area that’s accessible on my device and that move as I try to scroll over to get to some sort of close button because, oh, I don’t know, the designer is afraid the modal cover might look cut off and uses a solution that doesn’t stick in place when users are scrolling.

    If you don’t know what a given solution will look like on mobile, please DON’T use it. Modal text boxes are annoying enough without using ones that are impossible to close!

    • @Amy, due to your lack of punctuation i couldn’t fully understand what you were saying, but I’ll try to give a proper answer.

      I use the element with fixed position. Looks exactly the same on iPhone and PC. For a close button, i use an <a><!--formatted--> element with an onclick handler and display: block. Upon further request i can mail you a link to the website i made.

    • @Amy If you don’t know how to implement a CLOSE function yourself, go post your pointless comments somewhere else. This is a free resource, go find somewhere else to complain please.

      Thanks for the great resource, and multiple options that you have come up with. Most of us appreciate it Sara!

  46. A great tutorial on how all those javascript frameworks create those nice dailogs. Well done.

  48. Awesome. Thank you so much for an excellent explanation and code samples. I found the editing pen to be helpful, without my having to code and test repeatedly. Great job.

  49. This is so great, thanks for sharing. I am always amazed with CSS3, there is always something new to learn. I’m going to try this out for my next design especially because it is supported in most major browsers! I found some awesome overlays techniques using the border-image property as well but its a little tricky.