i am using YensDesign smooth popup.

 

i have created an area map, that i can get 1 popup to showup:

 

when i try to add another DIV ID to show a unique popup, it fails... i am new to JS, so go easy on me...

 

do i need to create some type of an array?

 

1. <<div id="popupContact">
2. <<a class="popupContactClose">x</a>
3. <<h1>Title of our cool popup, yay!</h1>
4. <<
6. <</p>
7. <</div>
8. <<div id="popupContact2">
9. <<a class="popupContactClose">x</a>
10. <<h1>22Title of our cool popup, yay!</h1>
11. <<
12. <22sutff goes here
13. <</p>
14. <</div>
15. <<ma
16. <<area shape="poly" coords="90,63,128,110,150,95,177,80,202,71,229,65,250,65,249,4,220,3,194,8,165,17,142,29,114,42" href="#" id="button" />
17. <<area shape="poly" coords="255,5,257,64,276,68,301,73,325,83,345,91,373,109,408,61,387,42,355,25,324,13,281,3" href="#" id="button2" />
18. <</map>
19. <<div class="backgroundPopup"></div>

 

1. /***************************/
   //@Author: Adrian "yEnS" Mato Gondelle
   //@website: www.yensdesign.com
   //@email: yensamg@gmail.com
   //@license: Feel free to use it, but keep this credits please!     
   /***************************/
   
   
   
   
   
2. //SETTING UP OUR POPUP
   //0 means disabled; 1 means enabled;
   var popupStatus = 0;
   
   
3. //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;
    }
   }
   
   
   
   
   
   
   
   
   
   
   
4. //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;
    }
   }
   
   
   
   
   
   
   
   
5. //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": "absolute",
     "top": windowHeight/2-popupHeight/2,
     "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6
    
    $(".backgroundPopup").css({
     "height": windowHeight
    });
    
   }
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
6. 
   //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 && popupStatus==1){
      disablePopup();
     }
    });
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
7. });