Simple modal with only CSS

Learn how to make a simple modal with only CSS and HTML.

Hello there!

First things first, just create a simple html file with only the google fonts and the style of your modal:

After that, write the link for the modal and the modal itself (make sure the href and the modal ID have the same name!). Inside the modal, put the close button and the content itself.

That's it for the HTML! Now we need to create the css file. Create a styles paste and inside, the modal.css file. In the modal class, we need the flexbox to put the right things in their right place, with the animation property we build some cool effects when we open it.

Then, we need to hide the modal before we open it, right? You can add some media queries too:

Now, we need to make the modal content and the close button to look cool, you can make the close button next to the top of the page or close to the modal content:

It's beginning to look cool, isn't it? Now we only need to add the animation effects. If you want, you can change the fade-in effect you wrote in the beginning with the slide effect:

Awesome, right? Now you can style in the way you want and you are ready to rock!

Any doubts? Here's the whole code: https://github.com/supersonicgabs/simple-modal