Problem Statement

• Create a modal popup that appears when a link is clicked.
• The modal should cover the entire screen with a semi-transparent overlay.
• Include a modal content area that is centered and responsive.
• Provide a close button to hide the modal.
• Use the :target pseudo-class and CSS transitions to achieve a smooth fade-in/out effect.

Solution

Explanation:

• Modal Overlay:

  • The .modal element covers the entire viewport with a semi-transparent black background.
  • It starts hidden (opacity: 0 and visibility: hidden) and uses a transition on opacity for a smooth fade effect.

• :target Pseudo-Class:

  • When the user clicks the "Open Modal" link, the URL fragment changes to #modal.
  • The :target pseudo-class matches the element with the corresponding ID and makes it visible (opacity: 1 and visibility: visible).

• Modal Content & Close Button:

  • The .modal-content is centered inside the modal overlay and styled with a white background, padding, and rounded corners.
  • The close button (.modal-close) is positioned in the top-right corner of the modal content.
  • When clicked, it resets the URL fragment (using href="#"), causing the modal to disappear.

• Responsiveness:

  • The modal content is responsive due to its max-width: 500px and a flexible width (width: 100%), ensuring a good appearance on different screen sizes.

This solution meets all the challenge requirements, providing a fully functional pure CSS modal popup with smooth transitions and responsive design.