Click on box for popup image and bio

Question

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;
}

Answer 1

Taking a look at your provided JavaScript code I can immediately see that the first line of * / is preventing the JavaScript from executing properly. Also remove the very last line of / *

Try fixing up all the code errors on that page. I ran a scan and found your page to have 35 errors http://validator.w3.org/check?uri=http://www.scpolechamps.co.uk/classes-2/

Believe it or not, the simplest error in your markup can prevent JavaScript from properly working.

For example on that page you have the following:

<img style="border: 5px solid black;" "padding-bottom:10px;" alt="" src="/wp-content/themes/tigertone/images/pole.png" width="447" height="193" />

It should be:

<img src="/wp-content/themes/tigertone/images/pole.png" height="193" width="447" style="border:5px solid black;padding-bottom:10px" alt="Pole Dancing">

You had style="border: 5px solid black;" "padding-bottom:10px;" style="border: 5px solid black;" "padding-bottom:10px;" where it should have been all together like style="border:5px solid black;padding-bottom:10px"

Adding on, you should avoid using inline CSS. To give the image some style, place the CSS code in an external CSS file with the appropriate CSS ID or CLASS name that corresponds to your image. It will benefit you and your visitors in many ways.