css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. nice! you may want to change the overlay to use position: fixed rather than absolute to account for scrolling the page.

  2. oh yeah, nice suggestion mate.

  3. Would their be a way to not use javascript and have this popup appear when the page loaded?

  4. Nice, but the problem is that :target pushes a new item in document history. So if you launch the popup and then press the browser back button, it will show you again the popup, as if it was a new page...

  5. Good for a bit of CSS fun but as well as @blazicke's point above, using the :target CSS selector limits layout options. This implementation would get so inefficient/fragile with scale that you'd be far better off with a JS implementation. The :target selector is very limiting with modern web dev as it forces an instant scroll to top for the relevant #section, can't account for fixed navbars and requires a lot more CSS just to manage layout. Even using checkbox/radio :checked CSS state for popups wouldn't be worth the effort.

    JQuery is good to 'manage' state with add/remove class for static sites. For single page applications, the framework can usually manage the state, leaving more time to design cool popup styles rather than trying to manage 'state' and bloat CSS code using CSS states.

  6. Thank you for the great popup. Easy, clean, simple...Sweet!

  7. Thank you for cool realization!

    If input set type=password something strange are going :)

  8. Hi,

    I use your html css popup in my WordPress website page.

    It works fine but when scrolling other elements showing above the popup like: page title, buttons, sidebar, footer, etc., ..

    Screenshot 1

    Screenshot 2

    How to show the popup on top of all other elements on the page while scrolling?

    Thanks in advance for your reply.

    Best regards,


Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.