Pop-up dialogs with CSS

A popup in an HTML page can now be made with nothing more than CSS.

The primary tricks are:

any element in the page may be the "target" of a link.
the styling of any element can be switched when it is targeted by means of the CSS pseudo-class :target

Thus, an element may be defined to be invisible initially, and then become visible when a link is clicked with the element as target.

The element may itself contain a link that functions as a close button, which targets the main page, thus rendering the popup again invisible.

Sometimes it is desired that the main content be invisible while the pop-up is open. This is arranged by putting the popup element within a "mask" element which is initially invisible, but when it is targeted covers the entire screen, effectively masking the main content. The only trick in this is to define the mask element to have style properties
position: fixed; top: 0; left: 0; background-size: cover;
Another variant is a small "modal dialog", usually centered on the screen, and often only dimming the underlying elements. This is done by setting the style of the mask element so that the element is centered on the screen and
opacity: 0.8;

There are many variations and decorations, including gradual transitions to the popup and back.

If a popup with the same content (such as a directory or a menu) is desired in multiple pages, the content can be placed in a separate HTML file, and referred to from a single-line HTML iframe tag. Note that if this file itself includes CSS, that will override the properties from the enclosing page.