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

Example of modal just in CSS. I use the pseudo selector ":target" for modal action.


  1. hai .. i really say thanks for this tutiorial that you have made.. i want to ask something that is How to use that scripts ?? i try to put them all on my text editor but it doesn't run as well.. show me the way please...thanks

  2. I really like this, I actually started using the code for myself and it's working really well. The only issue I've come across is if the modal is larger than the vertical height of the browser, scrolling doesn't seem to work, but I haven't put much time into trying to combat that issue with CSS alone.

    Let me know if you have any thoughts or improvements that could be made.

  3. Hey Darcy, how are you?

    Can you open a new issue in github for the http://www.felipefialho.com/css-components/ project, can you make this?

    I will fix when possible :D

    Thank you!

  4. @syams, which scripts?

  5. Hello,

    I'm trying to use this modal for my project. Only question is why is it when I click on the modal button does it add "#modal-one" to the URL. When I close the modal it changes to "#"


  6. @gvissing, Can you use the modal on CSS Components? I believe that the problem was fixed - http://www.felipefialho.com/css-components/


  7. @LFeh that worked! Thanks so much!

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

You must be logged in to comment.