Create Pure CSS3 Modal Window : A Simple Way to Display Modal Window Using CSS3 Transition

Development Tutorials
Pure CSS3 Modal window

CSS3 had come along way. Things that you can’t do before is now possible even without the help of JavaScripts. One of my favorite key capabilities of CSS3 is the ability to create a modal window.

A modal window is child window to a parent window triggered when a button was click. It is usually associated with a pop-up window to display message, warning or even forms.
In today’s tutorial, we’re going to create a modal window using html5 and CSS3 alone. The idea is to have a trigger button or link which will make a modal window appear on click using a simple transition (or animation).

Resources You Need to Complete this Tutorial:

• Basic Knowledge about CSS3
• Time and Patience

Click Here for Demo

The HTML

Everything will be wrapped in a container class. The main wrapper for the modal is the id modal and the inner content will a simple div.
For the button, we have a class btn and an anchor tag #modal which will be manipulated later using the target selector.

The CSS

For this part let’s first add the general styles on our codes.

Next let’s add the juicy part. We will start by adding the container class styles which will fit our elements on in the middle of the screen with a specific width. The modal will have two states: the normal and the display state. When the button was click we will add a nice and smooth rotation of 270 degrees on the x-axis as our animation.

We use the :target state to display the modal when the button was click. Adding CSS3 transitions to our modal will make it a smooth animation.

 

Customize it the way you want it!

Pure CSS3 Modal
There you have it! You just created a cool Pure CSS3 modal. Although this was done using CSS only it is very flexible for more improvements.
Please feel free to customize this the way you want it. Drop a comment below if you have any questions or some thoughts you want to share.

Subscribe & Get E-Mail Updates Delivered

Our informative Design related articles featuring the latest Resources for Web Designers & the Web get delivered via email dialy. Thousands of readers have signed up already. Why don't you subscribe as well, and get articles delivered to your inbox?

Design addicted Geek who harbors a passion for Web Design & Technology.

1 Comment to: Create Pure CSS3 Modal Window : A Simple Way to Display Modal Window Using CSS3 Transition
  1. Not a great example: only works for me in Chrome, IE and Firefox both refuse to play – showing the modal element immediately, and not closing when the button is selected.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">