Create a modal window using pure HTML5 and CSS3

In this tutorial we will create a modal window using only HTML5 and CSS3 properties. The techniques used to create a functional modal box are CSS3’s transition, opacity, pointer-event, and background gradient properties.

Modal windows are used, among many others, to display login/register forms; advertisements; or just notifications to the user. They frequently contain critical information, that user must attend in order to return to the page.

This modal windows or modal boxes are normally created using Javascript, but we will create one using pure HTML5 and CSS3.

Here is the HTML code for the modal window:

We use this simple link that says “Click me to open modal window” to open the dialogue box. All the styling is done with classes, so the ID is just a hook for opening the modal box.

Here is a simple version of the modal window.

With his corresponding CSS:

See simple demo | Click view source code to see the awesome code

Start Styling the HTML and CSS modal window – See final result

But the cool stuff comes with some aditional styling. So here is the complete HTML for a styled modal window:

And Here is the complete CSS for out CSS3 modal window:

This is just a demo so feel free to destroy it an make it your own. You can also send me some photo of your awesome modal window, or even share the code for it if you want. So here is how mine looks like.

CSS3 modal window

See styled demo | Click view source code to see the awesome code

Pros and Cons

As you’ve probably noticed, the big deal is creating a modal window in HTML5 and CSS3. Why is that such a big deal though? Modal boxes in JavaScript are something a beginner could create, there are hundreds of examples and downloads ready to be used. So why do we want to scrap JavaScript in favour of HTML5 and CSS3?

It would be naive for us to say that one selling point is making sure people with JavaScript can use them; statistics show that only 2% of people worldwide browse without JavaScript, so if that is not an issue, what is?

If you compare this code to any JavaScript animation library you will be shocked to see how much this code is minimized. This means that we have cleaner code witch makes it easier to modify the CSS and HTML.

Besides HTML5 and CSS3 are the future. Everybody is working to implement them into their designs and projects, and using them helps perpetuate its adoption and ensures you don’t get left behind. You get cleaner code, you don’t have to worry about JavaScript libraries. HTML5 and CSS3 aren’t going anywhere, so there’s no reason not to use them.

The big con of the modal window created using HTML5 CSS3 is the compatibility issues with some old browsers. But essentially works in anything, including all mobile browsers, except IE7 and IE8.

13 thoughts on “Create a modal window using pure HTML5 and CSS3”

  1. This article looks familiar. Oh wait I know why.
    Cause this is the original article:
    webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

    1. Hi Adam, When you click the #close button you are simply navigating away from the pop-up div section. You can see that the URL is changing, so it is simply an id navigation.

  2. THis doesn’t seem to work at all in IE10, though it does perfectly in chrome and firefox. Any idea why or am I missing something? Used this demo exactly.

  3. Is there any way in which you can put dynamic content into the modal box such as fetching data from a database and displaying as a table?

    I am wanting to create a modal selection box that displays a table of names for the user to select then return the selected record back to the calling form.

    Many Thanks

  4. I want to know, if i can implement the same without using a link suppose i need to invoke a modal window from an list of values then what should be the change in code
    Requirement is like i have list box from there if i select any item the corresponding window should display

Leave a Reply

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