Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Build a Popup Modal Window Using the jQuery Reveal Plugin

by
This post is part of a series called Bringing Premium Pixels to Life.
Menu Notification Badges Using HTML5 Data-Attributes
Powering Orman's Image Slider Controls With Nivo

Today we'll be taking Orman's Popup Modal Window and recreating it with HTML and CSS. We'll then make use of the jQuery Reveal plugin to give it full functionality. We'll even take things a step further and add some CSS3 Media Queries to make it adjust for mobile usage. Let's dig in!

[This is] a simple little modal window, perfect perhaps for small confirmation messages as seen in the preview. And no, there is no excuse for ever using Comic Sans. Orman Clark

Step 1: HTML5 Base

We'll start off by creating a blank document using HTML5 markup. We've linked to our stylesheet and to the HTML5 Shiv which will allow HTML5 elements to render properly in IE. Crucially, we've also linked to the latest jQuery library (hosted by Google) at the bottom of our page for optimized page loading.

Lastly, you may notice we've also included another line in our head; the viewport metatag. This'll allow devices to interpret our page properly irrespective of their screen size. If you'd like to find out more about this be sure to check out this Quick Tip!

<!DOCTYPE html>
<html>
<head>

	<!--Meta tags-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--Title-->
	<title>Pop Up Modal Window</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

	<!--HTML5 Shiv-->
	<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
</head>
<body>






	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

Step 2: Downloading Reveal

Before we start adding any markup and styles we'll download the Reveal plugin. Head on over to http://www.zurb.com/playground/reveal-modal-plugin and hit 'Download the Reveal kit' to the right of the page.

Unpackage the file you've downloaded. You'll need to copy the jquery.reveal.js to the root of your site, or whichever folder you'd prefer. I created a folder called "js", which is where I usually keep my javascript resources. Next we'll need to reference our script, so copy the following after your jQuery script, making sure the path is correct.

<script src="js/jquery.reveal.js"></script>

Step 3: Creating a Button

For this tutorial, we'll create a button which can be clicked to activate the modal. I've gone ahead and taken a button style from Orman's Simple Web Buttons freebie.

<body>

	<a href="#" id="button">Click me</a>

Before we go and throw in some styles we'll quickly add a reset to remove any unwanted margins etc. from the browser. We've also added some styles for the body, just a font-family, background and secured the font-size at 100%.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
html {
	font-size: 62.5%; 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration:none;
}


body {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:100%;

	background:#fff;
}

For the button we'll create the style using some gradients, box shadows and border-radius. The main thing you need to take notice of here is the positioning.

Firstly we're positioning the button absolutely, to the body/browser. Applying 50% to left and top will position its top left corner prefectly central in the screen. Next we need to minus some margin top and left. To find out what we need to minus them by we'll take a look at our height and width. We need to half our width of 78 to get 39, and minus the margin-left for that. Then we take 28/2=14 and minus the margin top by that. If you're not sure what is happening here, it’s a neat trick to vertically and horizontally center an item within CSS. If you'd like to find out more, check out this neat post on CSS Tricks.

Having done this we've also added a hover effect which is optional.

#button {
	width:78px;
	height:28px;

	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #ca9336;

	-webkit-box-shadow:
		inset 0px 1px 0px #fee395,
		      0px 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow:
		inset 0px 1px 0px #fee395,
		      0px 1px 1px rgba(0,0,0,.15);
	box-shadow:
		inset 0px 1px 0px #fee395,
		      0px 1px 1px rgba(0,0,0,.15);

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;

	font-size:13px;
	font-weight:bold;
	text-align:center;
	line-height:28px;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	position:absolute;
	top:50%;
	left:50%;
	margin-top:-14px;
	margin-left:-39px;
}

#button:hover {
	background-image: -webkit-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: -moz-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: -o-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: -ms-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fec252', EndColorStr='#fecd61');

	-webkit-box-shadow:
		inset 0px 1px 0px #fed17e,
		      0px 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0px 1px 0px #fed17e,
		      0px 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0px 1px 0px #fed17e,
		      0px 1px 1px rgba(0,0,0,.1);
}

Step 4: Creating the Base of the Modal

Next we'll add some markup which will create our modal window. We'll start off by creating a div with an ID of 'modal'. This'll be the base of our modal window.

<body>

<a href="#" id="button">Click me</a>


<div id="modal">

</div>

OK, on to some styling for this window. Once again we'll use the centering method. You may also see we're using !important. Nailing CSS styles down in this method is often unadvisable (it can ruin the specificity of a stylesheet and make future editing really awkward), but in this case we have no alternative as the plugin-defined styles need to be over-written.

We've also added visibility:hidden; to hide the menu, it'll be shown by clicking our button.

#modal {
	width:360px;
	height:189px;
	padding:8px;

	background:rgba(0,0,0,.3);

	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;

	position:absolute !important;
	top:50% !important;
	left:50% !important;
	margin-top:-94px !important;
	margin-left:-180px !important;
	z-index:101;
}

We've applied a border-radius of 8px which might seem like an unusual value, but this will ensure the outer corners flow appropriately round those on the inside.

Base Modal

Step 5: Modal Title

Next we'll add the title of the model, this will be another div with an ID of heading and just some text inside. Of course, feel free to use an <h2> or whatever you prefer.

<body>

<a href="#" id="button">Click me</a>


<div id="modal">

	<div id="heading">
		Are you sure you want to do that?
	</div>

Following that, we'll add some CSS to style it, just some basic stuff here, gradients box shadows etc.

#heading {
	width:360px;
	height:44px;

	background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e9e9e9');

	border-bottom:1px solid #bababa;

	-webkit-box-shadow:
		inset 0px -1px 0px #fff,
		0px 1px 3px rgba(0,0,0,.08);
	-moz-box-shadow:
		inset 0px -1px 0px #fff,
		0px 1px 3px rgba(0,0,0,.08);
	box-shadow:
		inset 0px -1px 0px #fff,
		0px 1px 3px rgba(0,0,0,.08);

	-webkit-border-radius:4px 4px 0px 0px;
	-moz-border-radius:4px 4px 0px 0px;
	border-radius:4px 4px 0px 0px;

	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:44px;

	color:#444444;
	text-shadow:0px 1px 0px #fff;
}
Modal Title

Step 6: Modal Main Content

Now we'll create the section which holds the paragraph and the buttons.

<body>

<a href="#" id="button">Click me</a>


<div id="modal">

	<div id="heading">
		Are you sure you want to do that?
	</div>
	
	<div id="content">
		<p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>

		<a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>

		<a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
	</div>

Some basic CSS rules again, for the paragraph we've defined the width of 100% and aligned the text to center but note in the HTML we used a line break.

#content {
	width:360px;
	height:144px;

	background:#fcfcfc;

	-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	-moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	box-shadow:0px 1px 3px rgba(0,0,0,.25);

	-webkit-border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	border-radius:0px 0px 4px 4px;
}

#content p {
	font-size:13px;
	font-weight:normal;
	text-align:center;
	line-height:22px;
	color:#555555;

	width:100%;
	float: left;

	margin:19px 0;
}
Modal Main Content

Step 7: Those Buttons!

We added some markup for the buttons in the last step but now we'll add some styles for them. You may have noticed that we also used two images here, these are used for the cross and the tick. The way we've structured this is by adding two classes, button which defines all the main styles of a button and then a red and green class, obviously to create the colors.

We've also targeted the images within the buttons, floated them left and given them a width and height.

.button {
	width:138px;
	height:33px;

	font-size:13px;
	font-weight:bold;
	line-height:33px;

	color:#fff;
	text-shadow:0px 1px 0px rgba(0,0,0,.2);

	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;

	-webkit-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);
	box-shadow:
		inset 0px 1px 0px rgba(255,255,255,.5),
		0px 1px 2px rgba(0,0,0,.3);

	float:left;
}
.button img { 
	float:left;
	width:33px;
	height:33px;
}



.button.green {
	background: -webkit-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -moz-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -o-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: -ms-linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	background: linear-gradient(top,  rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aad44f', endColorstr='#609d29',GradientType=0 );

	border:1px solid #5b8821;

	margin:0 5px 0 35px;
}
.button.red {
	background: -webkit-linear-gradient(top,  rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
	background: -moz-linear-gradient(top,  rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
	background: -o-linear-gradient(top,  rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
	background: -ms-linear-gradient(top,  rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
	background: linear-gradient(top,  rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87288', endColorstr='#ce3b46',GradientType=0 );

	border:1px solid #b0333e;

	margin:0 35px 0 5px;
}
Buttons

Step 8: Hooking it up With Reveal

Now we've finally completed styling our modal, we'll hook it up to the Reveal plugin. First we'll need to go back to our CSS, find #modal and add visibility:hidden; to it.

Next we'll need to go back to our html document and add the following to the bottom of our document, underneath where we reference the Reveal script. Here we're hooking up the button as our clicking item and our modal div as the item that opens up.

<script type="text/javascript">
	$(document).ready(function() {
		$('#button').click(function(e) { 		// Button which will activate our modal
			$('#modal').reveal({ 				// The item which will be opened with reveal
				animation: 'fade',              // fade, fadeAndPop, none
				animationspeed: 600,            // how fast animtions are
				closeonbackgroundclick: true,   // if you click background will modal close?
				dismissmodalclass: 'close'    	// the class of a button or element that will close an open modal
			});
		return false;
		});
	});
</script>

Step 9: Where's That Overlay at?

You may think we're done, but hold on soldier! We're supposed to have a black overlay to cover everything underneath the modal - the whole page. To fix this, we'll need to apply some CSS to an element which is created by the reveal plugin, covering the page.

.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.4);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
}
Overlay

Step 10: Making it Mobile

Okay, we've completed our modal now but we'll add a couple of styles to cater for smaller devices. The following media query (added after all other css rules) applies styles when viewed with screens no wider than 767px. To allow the modal to be viewed correctly without overlapping off the screen we've simply changing some widths, heights and font-sizes.

@media only screen and (max-width: 767px) {
        
	#modal {
		width:284px;
		height:156px;
		padding:8px;

		margin-left:-150px !important;
		margin-top:-78px;
	}
	#heading {
		width:284px;
		height:28px;

		line-height:28px;
		font-size:0.688em;
	}
	#content {
		width:284px;
		height:128px;
   	}
   	#content p {
   		width:284px;
   		font-size:0.688em;
   	}
   	.button img { 
		width:23px;
		height:23px;
	}
	.button {
		width:108px;
		height:23px;

		line-height:23px;
		font-size:0.688em;
	}
	.button.green {
		margin:0 4px 0 28px !important;
	}
	.button.red {
		margin:0 28px 0 4px !important;
	}
}

Older Browsers

So how will all this fare in older browsers?

Well, aside from modern CSS3 techniques such as gradients, border-radius etc. the modal will work just as expected in older Internet Explorer versions. A perfect example of graceful degradation.


Conclusion

Okay we've done it! We've taken another one of Orman's designs and coded it up, this time using a free jQuery plugin called Reveal.

Completed

I hope you liked this tutorial, thanks for reading!

Advertisement