Mask effect below pop-up box using pure CSS

Question

I convert any div on my webpages to pop-up box by adding a class, turnIntoOverlay , to the div. (See JSFiddle)

.turnIntoOverlay {
    position: fixed;
    background-color: white;
    top: 60px;
    max-width: 680px;
    z-index: 80;
    border: 6px solid #BBB;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    max-height: 800px;
    overflow: auto;
    padding:10px;
}

Now when the pop up is displayed I also want to create a mask that puts up a faded layer(or mask) to the rest other page elements that appear below popup box. To create this mask, I resorted to pure css approach using psuedo selectors, so that the mask is shown/hidden simply when a popup box( a turnIntoOverlay element) is visible. I added the following css:

.turnIntoOverlay:after {
    content: "";
    background-color: whitesmoke;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.5;
    top: 0;
    left: 0;
}

Everything works fine except that the mask appears on the pop up as well even when I keep the z-index lower than of popup. Also to my surprise, it works only when z-index=-1. Can you please suggest how to rectify this ?

See JSFiddle here

Answer 1

The problem is the stacking context. The :after content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1 works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 } is nr. 2 in the list.

Your only option would be using an additional wrapper:

<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>

moving your current styles for .turnIntoOverlay to .turnIntoOverlay > div and applying the overlay to the outer div with a positive z-index:

.turnIntoOverlay:after {
    z-index: 1;
}

Here is a demo.

Unfortunately IE8 and below are buggy on that. Also they do not know opacity and using -ms-filter does not work on elements without layout like pseudo classes :before and :after are.

---

Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color. No need for :after then:

.turnIntoOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: skyblue; /* for old browsers */
    background-color: rgba(135, 206, 235, 0.4);
}

Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).

Here is a demo.