Grokking CSS for Web Development
Vote

0% completed

​

Create a Modal Popup with :target and dialog

Can a popup open and close with no JavaScript at all? It can, because the part of a URL after the # sign is enough to tell CSS which element should be visible. This challenge builds such a modal, makes it fade in and out, and then explains why real projects use the <dialog> element instead.

The requirements

  • Open a modal popup when the user clicks a link.
  • Cover the whole screen with a semi-transparent overlay.
  • Center a content area on top of the overlay, and keep it within the screen on small devices.
  • Provide a close button that hides the modal.
  • Use the `:target

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content