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:

<a href="#openModal">Click me to open modal window</a>

1	<a href="#openModal">Click me to open modal window</a>

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.

<div id="openModal" class="modalWindow">
<div>
<h2>This is a sample modal window</h2>
<p>This is a sample modal window that can be created using CSS3 and HTML5.</p>
<a href="#ok" title="Ok" class="ok">Ok</a>
</div>
</div>

<div>

<h2>This is a sample modal window</h2>

<p>This is a sample modal window that can be created using CSS3 and HTML5.</p>

</div>

With his corresponding CSS:

.modalWindow {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
pointer-events: none;
text-align:center;
}
.modalWindow:target {
opacity:1;
pointer-events: auto;
}
.modalWindow > div {
width: 500px;
position: relative;
margin: 10% auto;
background: #fff;
}

.modalWindow {

position: fixed;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.2);

z-index: 99999;

opacity:0;

pointer-events: none;

text-align:center;

}

.modalWindow:target {

opacity:1;

pointer-events: auto;

}

.modalWindow > div {

width: 500px;

position: relative;

margin: 10% auto;

background: #fff;

}

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:

<div id="openModal" class="modalWindow">
<div>
<div class="modalHeader">
<h2>This is a sample modal window</h2>
<a href="#close" title="Close" class="close">X</a>
</div>
<div class="modalContent">
<p>This is a sample modal window that can be created using CSS3 and HTML5.</p>
<p>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.</p>
</div>
<div class="modalFooter">
<a href="#cancel" title="Cancel" class="cancel">Cancel</a>
<a href="#ok" title="Ok" class="ok">Apply</a>
<p>Keep in mind that this is a demo</p>
<div class="clear"></div>
</div>
</div>
</div>

<div>

<h2>This is a sample modal window</h2>

</div>

<p>This is a sample modal window that can be created using CSS3 and HTML5.</p>

<p>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.</p>

</div>

<a href="#cancel" title="Cancel" class="cancel">Cancel</a>

<a href="#ok" title="Ok" class="ok">Apply</a>

</div>

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

.modalWindow {
position: fixed;
font-family: arial;
font-size:80%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.2);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalHeader h2 { color: #189CDA; border-bottom: 2px groove #efefef; }
.modalWindow:target {
opacity:1;
pointer-events: auto;
}
.modalWindow > div {
width: 500px;
position: relative;
margin: 10% auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #fff;
}
.modalWindow .modalHeader { padding: 5px 20px 0px 20px; }
.modalWindow .modalContent { padding: 0px 20px 5px 20px; }
.modalWindow .modalFooter { padding: 8px 20px 8px 20px; }
.modalFooter {
background: #F1F1F1;
border-top: 1px solid #999;
-moz-box-shadow: inset 0px 13px 12px -14px #888;
-webkit-box-shadow: inset 0px 13px 12px -14px #888;
box-shadow: inset 0px 13px 12px -14px #888;
}
.modalFooter p {
color:#D4482D;
text-align:right;
margin:0;
padding: 5px;
}
.ok, .close, .cancel {
background: #606061;
color: #FFFFFF;
line-height: 25px;
text-align: center;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close {
position: absolute;
right: 5px;
top: 5px;
width: 22px;
height: 22px;
font-size: 10px;
}
.ok, .cancel {
width:80px;
float:right;
margin-left:20px;
}
.ok:hover { background: #189CDA; }
.close:hover, .cancel:hover { background: #D4482D; }
.clear { float:none; clear: both; }

.modalWindow {

position: fixed;

font-family: arial;

font-size:80%;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,0.2);

z-index: 99999;

opacity:0;

-webkit-transition: opacity 400ms ease-in;

-moz-transition: opacity 400ms ease-in;

transition: opacity 400ms ease-in;

pointer-events: none;

}

.modalHeader h2 { color: #189CDA; border-bottom: 2px groove #efefef; }

.modalWindow:target {

opacity:1;

pointer-events: auto;

}

.modalWindow > div {

width: 500px;

position: relative;

margin: 10% auto;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

background: #fff;

}

.modalWindow .modalHeader { padding: 5px 20px 0px 20px; }

.modalWindow .modalContent { padding: 0px 20px 5px 20px; }

.modalWindow .modalFooter { padding: 8px 20px 8px 20px; }

.modalFooter {

background: #F1F1F1;

border-top: 1px solid #999;

-moz-box-shadow: inset 0px 13px 12px -14px #888;

-webkit-box-shadow: inset 0px 13px 12px -14px #888;

box-shadow: inset 0px 13px 12px -14px #888;

}

.modalFooter p {

color:#D4482D;

text-align:right;

margin:0;

padding: 5px;

}

.ok, .close, .cancel {

background: #606061;

color: #FFFFFF;

line-height: 25px;

text-align: center;

text-decoration: none;

font-weight: bold;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

-moz-box-shadow: 1px 1px 3px #000;

-webkit-box-shadow: 1px 1px 3px #000;

box-shadow: 1px 1px 3px #000;

}

.close {

position: absolute;

right: 5px;

top: 5px;

width: 22px;

height: 22px;

font-size: 10px;

}

.ok, .cancel {

width:80px;

float:right;

margin-left:20px;

}

.ok:hover { background: #189CDA; }

.close:hover, .cancel:hover { background: #D4482D; }

.clear { float:none; clear: both; }

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”

Giovana says:

June 14, 2013 at 1:07 pm

Hi,
How can I make the window automatically open and only once?
Thank you!

Steve says:

June 26, 2013 at 11:58 pm

Nice tutorial – thank you. Is there a way to make this work on hover, instead of on click?

Thanks

Steve

nathaniel says:

August 7, 2013 at 6:41 pm

There is a slight error in the code; the modalFooter div isn’t closed. Cheers!

1. Catalin says:
  
  August 26, 2013 at 3:50 pm
  
  thank you nathaniel, I have just fix that
  
Jarrod says:

August 29, 2013 at 5:45 pm

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. Catalin says:
  
  September 12, 2013 at 11:32 am
  
  Yes Jarrod, that is the start point
  
Adam says:

September 3, 2013 at 4:14 pm

Hello, i read your code but i don’t understand how you close the window, can you explain ? Thanks

1. Catalin says:
  
  September 12, 2013 at 11:41 am
  
  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.
  
JRP says:

September 15, 2013 at 3:23 am

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.

1. n2n says:
  
  January 22, 2015 at 3:30 pm
  
  IE does not support pointer-events, use display: none / display: block
  
Geoffrey says:

December 6, 2013 at 2:39 am

Very nice. I do like the idea of no javascript.

Geoffrey says:

December 6, 2013 at 3:01 am

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

kiran says:

February 11, 2014 at 7:23 am

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