Convert single JQuery Magic popUp window code to accomodate multiple windows on same page
<p>Adrian at YensDesign created a perfect single window JQuery popUP window. I have implanted it on a page and the manner in which it was put together makes it intuitive to use. I would call myself an advanced tinkerer with js and am learning as I go. The question I have is similar to, but not quite close enough to some previous questions asked, so I am creating a new thread for posterity and thank you for any assistance offered. Forgive my lack of protocol on the code entries below, I am new to your system :)   To wit: </p>

<p>I have six popUps on a page offering different information, and each are opened such that only one at a time can be open. Just the way I want it, so good to go there...</p>

<p>Here is one [of six] entries on the page:</p>

<pre><code>[html]
&lt;div id="button"&gt;&lt;input type="image" src="images/submitButton.gif" alt="Read more"/&gt;&lt;/div&gt;
&lt;/center&gt;
&lt;div id="popupContact1"&gt;
    &lt;h1&gt;More on Larger Sites...&lt;/h1&gt;
    &lt;p id="contactArea"&gt; ~~~ my written copy goes here ~~~&lt;/p&gt;
        &lt;a id="popupContactClose"&gt;&lt;img src="images/closeP.gif" width="78" height="25"      
 alt="closeWindow"&gt;&lt;/a&gt;
        &lt;/div&gt;&lt;!--end popUpContact--&gt;
        &lt;div id="backgroundPopup"&gt;&lt;/div&gt;
        &lt;!--end JQuery--&gt;
[/html]
</code></pre>

<p>and here is the corresponding code:</p>

<pre><code>[code]
 //SETTING UP OUR POPUP
 //0 means disabled; 1 means enabled;
 var popupStatus = 0;

 //loading popup with jQuery magic!
   function loadPopup(){
 //loads popup only if it is disabled
   if(popupStatus==0){
$("#backgroundPopup").css({
    "opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
 }

//disabling popup with jQuery magic!
  function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
   }

 //centering popup
   function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
    "position": "fixed",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
    "height": windowHeight
});

  }


  //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){

//LOADING POPUP
//Click the button event!
$("#button").click(function(){
    //centering with css
    centerPopup();
    //load popup
    loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
    disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
    disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
    if(e.keyCode==27 &amp;&amp; popupStatus==1){
        disablePopup();
    }
});

   });

[/code]
</code></pre>

<p>This single box code has everything referenced as ID's. I assume some or all objects need to be converted to class?</p>

<p>So the question is how &amp; where do I make additions to the code, i.e introduce new objects, and how should they be referenced on the page?
The complete html code can be seen at <a href="http://www.johnmossdesigns.com/gallery.html" rel="nofollow">http://www.johnmossdesigns.com/gallery.html</a></p>
