CSS Popup without JavaScript

This method shows how to create a popup in HTML using CSS.

In the HTML above, clicking the button inside the anchor element with the class “button” will make the div below with class “content” visible. The div is initially hidden by setting opacity to 0 and visibility to hidden. Using “display: none” has a drawback: it prevents animating the div when it shows or hides.

To show the div, assign an id to it and set the anchor element’s “href” value to match the div’s id. Clicking the button will then target the div.

Once an HTML element is targeted as an anchor element, a CSS selector called `:target` can be used to apply rules to the currently selected element.

When the button is clicked, the div will be targeted, applying the declared deceleration block to make the div visible. Clicking the close anchor element inside the div sets the href value to “#”, making the div invisible as it’s no longer actively targeted.