How to Create Popup Box Using HTML and CSS?

Final Output:

1. HTML Structure

  • Button to Open the Popup: A clickable button (e.g., "Open Popup") is provided to trigger the popup.

  • Popup Container: The popup is enclosed in a container (div) that acts as an overlay, covering the entire screen when visible.

  • Popup Content: Inside the container, there is a smaller box (div) to display the popup content, such as a title, text, or other elements.

  • Close Button: A button is placed within the popup to allow users to close it.

2. CSS Styling

  • Popup Overlay: A semi-transparent background (rgba(0, 0, 0, 0.5)) covers the entire screen to give a modal-like effect. Initially, it is hidden using display: none.

  • Popup Box: The actual popup box is styled with a background color, padding, rounded corners, and a shadow to make it look distinct.

  • Positioning:

    • The overlay and popup box use position: fixed and flexbox to center the popup on the screen.

    • The popup box itself is positioned in the center of the overlay.

  • Close Button: Styled as a small button (e.g., a red "×") to close the popup.

3. Making It Functional

  • By default, the popup is hidden (display: none for the overlay).

  • When the "Open Popup" button is clicked, the overlay's display is changed to flex using JavaScript or other methods to make it visible.

  • Clicking the close button or outside the popup reverts the display to none, hiding the popup again.

  • Latest Posts

  • Quick Links

How to Create Popup Box Using HTML and CSS?

  • Follow Us