Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

Build a Popup Modal Window Using the jQuery Reveal Plugin

Length:MediumLanguages:
This post is part of a series called Bringing Premium Pixels to Life.
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!

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.

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.

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%.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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.

I hope you liked this tutorial, thanks for reading!