Modal boxes are the new popup windows. If you ever wondered how to build one on your own, here’s your chance to learn it.
DEMO
Here you can see, what we’re building today. DEMO
The HTML
<a href="#" id="open">Open modal box</a>
<div id="modalBox">
<p>Donec porta magna ac quam. Sed mollis. Nunc ultricies commodo neque. Aliquam dapibus. Nulla gravida interdum tortor. In arcu. Pellentesque eu quam. Donec aliquam iaculis urna. Maecenas vel orci quis arcu vulputate cursus. Quisque lectus. Fusce ultricies orci at quam. Sed ut augue. </p>
<img src="path/to/some/image.jpg" alt="some image" />
<p><a href="#" id="close">Close modal box</a></p>
</div><!-- end modalBox -->
<div id="darken"></div><!-- end darken -->
In the first line we create an anchor tag leading to nowhere with the ID «open» and the text «Open modal box».
After that we create the modal box itself. We’re going to hide the box afterwards. In the modal box we can put anything we want. If it’s a video, some text, an image, an iframe, whatever…
We have to put also another anchor tag inside the modal box. We give it the ID «close». Again the link has to lead to nowhere (#). With this anchor tag the user will be able to close the modal box.
Right before the closing body tag we’ll have to create another div which I gave the ID «darken». ‘Cause it will darken the whole screen a little bit.
The CSS
body {
background:orange;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:white;
}
a:link, a:visited, a:active {
background:red;
color:white;
text-decoration:none;
padding:3px;
}
a:hover {
background:white;
color:red;
}
#darken {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:199;
background:black;
opacity:.5;
filter:Alpha(opacity=50); /* Transparency in IE */
}
#modalBox {
position:absolute;
top:50%;
left:50%;
width:400px;
height:300px;
margin-left:-200px;
margin-top:-200px;
border:#ccc 10px solid;
padding:10px;
display:none;
background:white;
font-size:12px;
color:black;
z-index:200;
}
I guess I don’t have to explain the styling of the body and the anchor tags. It’s just some cosmetical styling. What’s pretty important is the stylng of the «darken» div and the modal box itself.
«darken»
The «darken» div is a layer that we’re going to lay above the content of the site from which we’re going to open the modal box. We have to set the position to absolute and place it on the top left corner. Set the width and height to 100%, so it’s filling the whole browser window even if we’re resizing the window. We also set the display to none. We’ll show it with jQuery by clicking on the «Open modal box» link. We set the background to black and give it an opcity of 50%. Since our beloved friend «IE» can not handle this property we have to define a special property for IE with the same effect.
«modalBox»
Since we want the modal box to appear in the middle of our browser window, we have to set the position to absolute. Then set the top and left property to 50%. Give it an exact width and height. Then give it a left margin with the negative value of half the width and a top margin with the negative value of half the height. To make it even nicer we give the modal box a light grey border, some padding, a background color, set the font size and some font color.
«z-index»
To make the modal box appear above all the other stuff on the page we have to give the modal box a pretty high z-index. In this example I gave it a z-index of 200. Since we wanna have the «darken» div right below the modal box we give it a z-index of one lesser than the z-index of the modal box: 199.
The jQuery
$(function(){
$('#open').click(function(){
$('#darken').fadeIn('500');
$('#modalBox').fadeIn('500');
});
$('#close').click(function(){
$('#modalBox').fadeOut('500');
$('#darken').fadeOut('500');
});
});
We write two function in jQuery. With the first we can open the modal box, with the other we can close the modal box.
«open»
We get the anchor tag with the ID «open» and start a function. In this function we get the div with the ID «darken» and let it fade in by the time of 500 miliseconds. We do the same with the div with the ID «modalBox».
«close»
In the closing function we let the two div fade out by the time of 500 miliseconds.
Complete Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Modal Box With jQuery</title>
<style type="text/css">
body {
background:orange;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:white;
}
a:link, a:visited, a:active {
background:red;
color:white;
text-decoration:none;
padding:3px;
}
a:hover {
background:white;
color:red;
}
#darken {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:199;
background:black;
opacity:.5;
filter:Alpha(opacity=50); /* Transparency in IE */
}
#modalBox {
position:absolute;
top:50%;
left:50%;
width:400px;
height:300px;
margin-left:-200px;
margin-top:-200px;
border:#ccc 10px solid;
padding:10px;
display:none;
background:white;
font-size:12px;
color:black;
z-index:200;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#open').click(function(){
$('#darken').fadeIn('500');
$('#modalBox').fadeIn('500');
});
$('#close').click(function(){
$('#modalBox').fadeOut('500');
$('#darken').fadeOut('500');
});
});
</script>
</head>
<body>
<a href="#" id="open">Open modalBox</a>
<div id="modalBox">
<p>Donec porta magna ac quam. Sed mollis. Nunc ultricies commodo neque. Aliquam dapibus. Nulla gravida interdum tortor. In arcu. Pellentesque eu quam. Donec aliquam iaculis urna. Maecenas vel orci quis arcu vulputate cursus. Quisque lectus. Fusce ultricies orci at quam. Sed ut augue. </p>
<img src="http://path/to/some/image.jpg" alt="some image" />
<p><a href="#" id="close">Close modalBox</a></p>
</div><!-- end modalBox -->
<div id="darken"></div><!-- end darken -->
</body>
</html>
Final thoughts
I hope you liked the today’s tutorial and please let me know if you got any questions or if you got another solution to that problem.
Leave a Reply
