Click on box for popup image and bio

I am building a website in WordPress and can’t get my JavaScript to work.

I am trying to produce a similar effect to this: Click here where when you click on the consultant’s box an image and bio pops up.

I have produced the JavaScript and linked it all up – but the box won’t load up.

*/

$(document).ready(function() {

/*

*/
$('.classes a').click(function(e) {

    e.preventDefault();

    // Get the dimensions of the user's screen
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    // Set the mask overlay to fill the entire screen
    $('.mask').css({'width':maskWidth,'height':maskHeight});

    // Fade in the mask overlay
    $('.mask').fadeTo(600, 0.7);

    // Get the dimensions of the user's browser
    var winHeight = $(window).height();
    var winWidth = $(window).width();

    // Set the bio pop-up to be in the middle of the screen
    $('.classes-bio').css('top', winHeight/2-$('.classes-bio').height()/2);
    $('.classes-bio').css('left', winWidth/2-$('.classes-bio').width()/2);

    // Fade in the bio pop-up
    $(this).parent('.classes').find('.classes-bio').delay(610).fadeIn(600);
});

// Click the mask or close button to fade out the pop-up and the mask
$('.mask, img.close-button').click(function(e) {

    $('.classes-bio, .video-box').fadeOut(600);

    $('.mask').delay(610).fadeOut(600);
});

/*

CSS:

.classes {
margin-bottom: 75px;
}

.classes {
width: 450px;
float: left;
margin: 10px 8px 0 0;
}

.classes:nth-child(4n+4) {
margin-right: 0;
}

.classes a {
text-decoration: none;
}

.classes h2,
.classes .classes-bio h2 {
font-weight: 700;
font-size: 1.5em;
text-transform: none;
margin: 15px 0 5px 12px;
}

.classes .classes-bio p {
color: #666;
line-height: 21px;
margin: 0 70px 18px 70px;
}

.classes .classes-bio p strong {
font-weight: 700;
}


.classes a.read-more {
color: #D1883E;
display: block;
margin: 12px 0 0 0px;
}

.classes a.read-more:hover {
text-decoration: underline;
}

.classes .classes-bio {
position: fixed;
width: 600px;
height: 90%;
display: none;
z-index: 9998;
padding-bottom: 10px;
background-color: #eaeaea;
}

.classes .classes-bio .close-button {
position: absolute;
top: -17px;
right: -17px;
z-index: 9999;
cursor: pointer;
}

.classes .classes-bio img.profile {
width: 238px;
margin: 25px 181px 8px;
}

.classes .classes-bio h2 {
text-align: center;
margin-bottom: 6px;
}

.classes .classes-bio p.job-title {
font-size: 1.1em;
margin-bottom: 28px;
}

.classes .classes-bio p {
font-size: 0.9em;
color: #000;
text-align: center;
}

/*

.mask {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9997;
background-color: #000;
}