Two jQuery popups on one page

[PeterWaij]

I want to use two jQuery popups on one page. The problem is that i can't get it to work.

<div id="popupContact2" class="popupContact"> 
	<a class="popupContactClose">x</a>
		<h1>Title popup</h1>
		<p id="contactArea">
			sutff goes here
		</p>
</div>

<div id="popupContact" class="popupContact"> 
	<a class="popupContactClose">x</a>
		<h1>Title of our cool popup, yay!</h1>
		<p id="contactArea">
			sutff goes here
		</p>

</div>
<map name="Map" id="Map">
<a href="#" id="button" popup="popupContact" />
<a href="#" id="button" popup="popupContact2" />
</map>
 
<div class="backgroundPopup"></div>

This is the jQuery popup.js file

var popupStatus = {}; 
 

function loadPopup(popupId){ 

    if(popupStatus[popupId]==0){ 
        $(".backgroundPopup").css({ 
            "opacity": "0.7" 
        }); 
        $(".backgroundPopup").fadeIn("slow"); 
        $("#" + popupId).fadeIn("slow"); 
        popupStatus[popupId] = 1; 
    } 
} 
 

function disablePopup(popupId){ 

    if(popupStatus[popupId]==1){ 
        $(".backgroundPopup").fadeOut("slow"); 
        $("#" + popupId).fadeOut("slow"); 
        popupStatus[popupId] = 0; 
    } 
} 
 

function centerPopup(popupId){ 

    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#" + popupId).height(); 
    var popupWidth = $("#" + popupId).width(); 

    $("#" + popupId).css({ 
        "position": "absolute", 
        "top": windowHeight/2-popupHeight/2, 
        "left": windowWidth/2-popupWidth/2 
    }); 

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

$(document).ready(function(){ 
    popupStatus = { popupContact: 0, popupContact2: 0 }; 
 
 
    $("#button").click(function(){
	  
        var popupId = $(this).attr("popup"); 

        centerPopup(popupId); 

        loadPopup(popupId); 
    }); 
 
    $(".popupContactClose").click(function(){ 
        var popupId = $(this).parents("div").attr("id"); 
        disablePopup(popupId); 
    }); 

    $(".backgroundPopup").click(function(){ 

        for (var popupId in popupStatus) 
        { 
          if (popupStatus[popupId] == 1) 
            disablePopup(popupId); 
        } 
    }); 

    $(document).keypress(function(e){ 
        var popupId = $(e.target).parents("div.popupContact").attr("id"); 
        if(e.keyCode==27 && popupStatus[popupId]==1){ 
            disablePopup(popupId); 
        } 
    });

 
 
});

Can someone give me some help with this.

[pritaeas]

For one, both your buttons have id="button". An id should be unique, so perhaps you should use class="button".

You should also hide the popupContact class, because the popup div's are showing already.

Is there a reason you are using a map ? Unless there is something missing, the buttons will not show up now.

[PeterWaij]

Hi Pritaeas,

It was indeed the idea that there is no buttons on the page. I have solved this problem on a different way. I have changed the popupstatus to one and two and it worked.