A popup in an HTML page can now be made with nothing more than CSS.
The primary tricks are:
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
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
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
Note that if this file itself includes CSS, that will override the
properties from the enclosing page.