Thread: Using a HTML5, CSS3 and jQuery website template, can't get the Java pop-ups to work..

This is a free template I am trying to adapt for a personal portfolio:
http://www.priteshgupta.com/templates/vivid-photo

I have edited the original template and uploaded it HERE
This is the style.css:
http://home.stoynev.net/test/css/style.css

On the menu on the right, the template originally comes with three links - ME, MY WORK and CONTACT; when clicked, a Java pop-up shows the content of the links.

However I need two more links - RESUME and REFERENCES.

The pop-ups are defined in a separate file called pop-ups.js:
http://home.stoynev.net/test/js/pop-ups.js

I have added the respective code in pop-ups.js for the two additional menu entries that I need, and also in index.html so they show on the webpage,
in style.css along with the code for the three pop-ups that work "out of the box".


The problem is that after all done, when I click on ANY of the two new entries I added (be it References or Resume) - no pop-up shows...


The two articles - References and Resume - are defined in index.html as such:

    <article id="popupResume" class="popupResume">
        <a id="popupResumeClose">
    </article>
 
    <article id="popupReferences" class="popupReferences">
        <a id="popupReferencesClose">
    </article>

Here is the modified section from style.css - I added just two entries in each line (popupResume and popupReferences, etc):

    #popupAbout,#popupProjects,#popupResume,#popupReferences,#popupContact{height:600px;width:900px;overflow:auto;background-color:rgba(0, 0, 0, 0.75);border:2px solid #cecece;z-index:15;padding:20px;color:#FFF;-webkit-box-shadow:0px 0px 4px #000 inset;-moz-box-shadow:0px 0px 4px #000 inset;box-shadow:0px 0px 4px #000 inset;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;-ms-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;margin-top:-50px;visibility:hidden}
    #popupAbout p,#popupProjects p,#popupResume p,#popupReferences p,#popupContact p{padding-left:10px;font-size:18px;line-height:20px}
    #popupAbout h1,#popupProjects h1,#popupResume h1,#popupReferences h1,#popupContact h1{text-align:left;font-size:30px;letter-spacing:1px;border-bottom:1px dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px}
    #popupAboutClose,#popupProjectsClose,#popupResumeClose,#popupReferencesClose,#popupContactClose{right:6px;top:6px;position:absolute;display:block}
    *:focus{outline:none}

And these are the two paragraphs I added to pop-outs.js:

  var popupResumeStatus=0;
    function loadPopupResume(){if(popupResumeStatus==0){$("#popupResume").fadeIn("slow");
    popupResumeStatus=1}}function disablePopupResume(){if(popupResumeStatus==1){$("#popupResume").fadeOut("slow");
    popupResumeStatus=0}}function centerPopupResume(){var b=document.documentElement.clientWidth;
    var d=document.documentElement.clientHeight;
    var c=$("#popupResume").height();
    var a=$("#popupResume").width();
    $("#popupResume").css({position:"absolute",top:d/2-c/2,left:b/2-a/2})}$(document).ready(function(){$("#popupResume").fadeOut();
    popupResumeStatus=0;
    $("#Resume").click(function(){$("#popupResume").css({visibility:"visible"});
    disablePopupAbout();
    disablePopupContact();
    disablePopupProjects();
    disablePopupReferences();
    centerPopupResume();
    loadPopupResume()});
    $("#popupResumeClose").click(function(){disablePopupResume()})});
    $(function(){$("#popupResume").jScrollPane();
    $(".popupResume").jScrollPane({showArrows:true,horizontalGutter:10})});
 
 
    var popupReferencesStatus=0;
    function loadPopupReferences(){if(popupReferencesStatus==0){$("#popupReferences").fadeIn("slow");
    popupReferencesStatus=1}}function disablePopupReferences(){if(popupReferencesStatus==1){$("#popupReferences").fadeOut("slow");
    popupReferencesStatus=0}}function centerPopupReferences(){var b=document.documentElement.clientWidth;
    var d=document.documentElement.clientHeight;
    var c=$("#popupReferences").height();
    var a=$("#popupReferences").width();
    $("#popupReferences").css({position:"absolute",top:d/2-c/2,left:b/2-a/2})}$(document).ready(function(){$("#popupReferences").fadeOut();
    popupReferencesStatus=0;$("#References").click(function(){$("#popupReferences").css({visibility:"visible"});
    disablePopupAbout();
    disablePopupContact();
    disablePopupResume();
    disablePopupProjects();
    centerPopupReferences();
    loadPopupReferences()});
    $("#popupReferencesClose").click(function(){disablePopupReferences()})});
    $(function(){$("#popupReferences").jScrollPane();
    $(".popupReferences").jScrollPane({showArrows:true,horizontalGutter:10})});

I am not that good w/ Java so any help will be greatly appreciated, TIA!