Simple jQuery/CSS3 Modal Box

Seeing as how my last tutorial about the “jQuery slide effect” had a great response I thought I’d be back to write another simple easy-to-follow jQuery tutorial for you guys.

What we’ll be making today is a jQuery modal box which can be used can used for all sorts including images, forms and in my case, my blogging profile.

The Live Demo

You can view the Live Demo Here

What Makes This Effect

HTML
CSS3
jQuery
Dreamweaver (or your favorite text editor)

New document

For the purpose of this tutorial I will include all css and jQuery in one file (index.html) but would advise not to do so when using this script in a live website, always call you styles and jQuery from an external file.

With that done and said, create yourself a new html file and name it index.html

Calling jQuery

I like to use google’s jQuery, it’s useful if your user has already visited a site using google hosted jQuery as it’ll be cached on their machine already.

So, in your document inside the head section insert the following script tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

Some markup

We’ll start by creating our modal box, using only on div to contain our elements such a heading, a few paragraphs and some social media icons. You can use the images included in the download or simply link to my online images.

<div class="modal-profile">
<h2>Nam liber tempor cum soluta nobis eleifend</h2>
    <a class="modal-close-profile" title="Close profile window" href="#"><img src="close.png" alt="Close profile window" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit littera um formas humanitatis per seacula quarta decima et quinta decima.Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    <a class="modal-social" href="http://www.klevermedia.co.uk"><img src="http://www.klevermedia.co.uk/themes/klevermedia/images/social/lovedsgn.png" alt="Love design" /></a>
    <a class="modal-social" href="http://www.klevermedia.co.uk"><img src="http://www.klevermedia.co.uk/themes/klevermedia/images/social/forrst.png" alt="Forrst" /></a>
    <a class="modal-social" href="http://www.klevermedia.co.uk"><img src="http://www.klevermedia.co.uk/themes/klevermedia/images/social/twitter.png" alt="Love design" /></a>
    <a class="modal-social" href="http://www.klevermedia.co.uk"><img src="http://www.klevermedia.co.uk/themes/klevermedia/images/social/skype.png" alt="Love design" /></a>
    <a class="modal-social" href="http://www.klevermedia.co.uk"><img src="http://www.klevermedia.co.uk/themes/klevermedia/images/social/rss.png" alt="Love design" /></a></div>

Style the modal box

With the barebones of the modal box set up, it’s time to bring it to life with some styling. We’re going to be using a little bit off css3 to give our modal box some nicely rounded corners and a box shadow, as in most cases internet explorer doesn’t recognise the css rule “border-radius” and will show squared corners instead.

.modal-profile h2 {
    font-size:2em;
    letter-spacing:-1px;
}
.modal-profile {
    display:none;
    height: 250px;
    width: 500px;
    padding:25px;
    border:1px solid #fff;
    box-shadow: 0px 2px 7px #292929;
    -moz-box-shadow: 0px 2px 7px #292929;
    -webkit-box-shadow: 0px 2px 7px #292929;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background: #f2f2f2;
    z-index:50;
}
a.modal-close-profile {
    position:absolute;
    top:-15px;
    right:-15px;
}
a.modal-social {
    margin:0 10px 0 0;
}

-moz-box-shadow
Allows mozilla firefox to recognise the box shadow property

-webkit-box-shadow
Allows google chrome to recognise the box shadow property

-moz-border-radius
Allows mozilla firefox to recognise the border radius property

-webkit-border-radius
Allows google chrome to recognise the border radius property

Lights out

To create the block overlay on the body of our webpage once the modal box is opened we’ll be creating an effect known as “lights out”, quite self explanatory as it give the illusion of flicking the light switch off on our webpage.

Create a new div below our modal box with the class of “modal-lightsout” like so.

<div class="modal-lightsout"></div>

Thats’s it, just one div, simple right?

Now to apply some css to position the div and apply a black background (you could use white for this tutorial if you have a lighter website).

.modal-lightsout {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:25;
    background:#000;
}

Make it pop with jQuery

Now with all our markup and styles set it’s time to make things work with the help of jQuery. Apply this code in your head section below you google jQuery reference

<script type="text/javascript">
$.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
        this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
        return this;
      }
    $(".modal-profile").center();
    $('.modal-lightsout').css("height", jQuery(document).height()); 
    $('a[rel="modal-profile"]').click(function() {
        $('.modal-profile').fadeIn("slow");
        $('.modal-lightsout').fadeTo("slow", .9);
    });
    $('a.modal-close-profile, .modal-lightsout').click(function() {
        $('.modal-profile').fadeOut("slow");
        $('.modal-lightsout').fadeOut("slow");
    });
</script>

Creating the link

Our modal box is now complete and ready for action, all it takes is us to create a link to call it. It’s important that for any link we want to use our modal box we apply the “rel” name of “modal-profile” like this.

<a rel="modal-profile" href="#">Open modal box</a>

Simples!

This was just a basic and simple way of creating a modal box, there are plenty of other ways to do this I just thought I’d show you how I do mine. As stated, this is great to use as a profile pop-up, or be a little more creative and show us what you’ve done? Hope you’ve enjoyed the read.