jQuery YensDesign POPup

Question

I am very new to JS so, please be easy on me...

So i am using YensDesign popup, that i figured out how to attach to a image map.

<img src="/_images/bhm-circle-chart-members.jpg" width="504" height="504" border="0" usemap="#Map" />
<map name="Map" id="Map">
<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"/>
<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" />
</map>


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

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

Seems to work great, if i only have 1 DIV ID..

what i can not figure out, is if i want a second DIV ID, how to create an array to allow multiple DIV IDs...

there has to be a simplier way than copy and pasting a new function for each DIV ID

//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": "absolute",
        "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 && popupStatus==1){
            disablePopup();
        }
    });

});

Answer 1

There are several issues with this code if you're going to make it work for multiple popups. You're going to have to do something to let the button know which popup it's supposed to be triggering and then pass that info to the other functions. You'll also need to add a class to the popup div to give you a "root" to navigate up to in selectors. A possible solution below:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = {};

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

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

//centering popup
function centerPopup(popupId){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#" + popupId).height();
    var popupWidth = $("#" + popupId).width();
    //centering
    $("#" + popupId).css({
        "position": "absolute",
        "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(){
    popupStatus = { popupContact: 0, popupContact2: 0 };


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

    //CLOSING POPUP
    //Click the x event!
    $(".popupContactClose").click(function(){
        var popupId = $(this).parents("div").attr("id");
        disablePopup(popupId);
    });
    //Click out event!
    $(".backgroundPopup").click(function(){
        // close any that are open
        for (var popupId in popupStatus)
        {
          if (popupStatus[popupId] == 1)
            disablePopup(popupId);
        }
    });
    //Press Escape event!
    $(document).keypress(function(e){
        var popupId = $(e.target).parents("div.popupContact").attr("id");
        if(e.keyCode==27 && popupStatus[popupId]==1){
            disablePopup(popupId);
        }
    });

});

You'll need to add the popupContact class to your divs:

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

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

and you'll need to add an attribute to your button that tells it which popup the button controls:

for example if using an input button:

<input type="button" popup="popupContact2" value="click me" />

or a link:

<a href="#" popup="popupContact2">Click me</a>

Hope that helps!