Click anywhere to bring back the overlay.

Usually, a modal overlay is created by layering a cover DIV over the entire page, then centering a message area within that element. Setting a semi-transparent PNG or an RGBA color background on the cover DIV completes the effect.

This page demonstrates using the outline CSS attribute on the message box instead of a separate cover element, so as to reduce the complexity of the code, and make it more semantic. The outline attribute is set to an arbitrarily large dimension and an RGBA color. Unlike the border attribute, the outline does not contribute any box-model dimension to the element it is applied to, so the position of the message box is not affected.

Spotted here, at about 4 minutes in.

Hello, I’m a modal overlay.