jQuery Pop Up Box

I have found it a regular request from clients to have animated pop up boxes containing content such as video and images etc. You can say they were looking for something quite similar to the Light Box and Fancy Box jQuery plugins. Today I am going to show you how to code something similar using jQuery.

View the Demo

View Demo »

The HTML

First, I am going to write the HTML markup for the pop up box. For this tutorial I am just going to have a small sentence saying ‘Here is some content’. However, this can be anything from images to a video embed.

Note: It is important to keep the names of the classes same as below.

<div class='popup'> <a href='#' title="Close" class='close'><img src='close.png' alt='close' height="20" width="20" /></a>
    <div class="pop-heading">
        <h3>Pop Up</h3>
    </div>
    <div class="pop-info">
        <p>Here is some content</p>
    </div>
</div>

I need to have a link to trigger the pop up box. Copy and paste the below HTML above the div class popup.

<a class="pop-up-link" href="#" title="View Pop Up">Click Here</a>

The CSS

h3 {
margin:0;
}

.popup {
position:absolute;
background:#CCC;
border:#666 1px solid;
display:none;
width:500px;
min-height:200px;
margin:0 auto;
padding:5px;
}

.close {
float:right;
position:relative;
z-index:99999;
margin:3px 6px 0;
}

.pop-heading {
background:#7F7777;
color:#FFF;
overflow:hidden;
position:absolute;
width:487px;
padding:.5em;
}

.pop-info {
clear:both;
padding:15px 2px;
}

Above is some basic styling to make the pop up box look pretty. The most important CSS rules are defined on ‘.popup’. This is because on page load, it will set the parent div to display: none along with absolute positioning.

Note: This is basic styling. You could go further to style the pop up box.

The jQuery

Now for the fun part. First of all I need to link in the jQuery library. This can be done externally by using the code below. Alternatively you can download the jQuery library to your computer and link it locally.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Copy and paste the below code into your head section of your website.

<script type="text/javascript">
// Pop Up Animation

        $(function() {

        var height = $(document).height();
        var width = $(document).width();
        var spanHeight = $('.popup').height();
        var spanWidth = 500;

        $('.pop-up-link').click(function() { 

            $(this).next()
                .css({ "top" :  height/2 - spanHeight/2 })
                .css({ "left" : width/2 - spanWidth/2 })
                .fadeIn(500);
        });

        $(".close").click(function () {
        $('.pop-up-link').next().fadeOut(500);
    });
});
</script>

In the above jQuery code I started off by declaring some variables to get the height and width of the document and class ‘popup’. The next bit of code determines whether the user has clicked a link with a class ‘.pop-up-link’. If this is true, a function will run to position the pop up div in the centre of the page using css and fade it in over 500 mili seconds. Finally, when the user clicks the close icon, another function will be triggered to fade out the pop up div over 500 mili seconds.

I hope you found this web design tutorial helpful.