Question

I am having an annoying problem right now with jquery. before i explain it let me give you my code:

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: [e-mail]
//@license: Feel free to use it, but keep this credits please!                  
/***************************/

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

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

        $contact_selector.fadeIn("slow");

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

//centering popup
function centerPopup($contact_selector){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $contact_selector.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!
    $("#button1").click(function(){
        //centering with css
        centerPopup($('#popupContact1'));
        //load popup
        loadPopup($('#popupContact1'));
    });
    $("#button2").click(function(){
        //centering with css
        centerPopup($('#popupContact2'));
        //load popup
        loadPopup($('#popupContact2'));
    });
    $("#button3").click(function(){
        //centering with css
        centerPopup($('#popupContact3'));
        //load popup
        loadPopup($('#popupContact3'));
    });
    $("#button4").click(function(){
        //centering with css
        centerPopup($('#popupContact4'));
        //load popup
        loadPopup($('#popupContact4'));
    }); 
    $("#button5").click(function(){
        //centering with css
        centerPopup($('#popupContact5'));
        //load popup
        loadPopup($('#popupContact5'));
    });
    $("#button6").click(function(){
        //centering with css
        centerPopup($('#popupContact6'));
        //load popup
        loadPopup($('#popupContact6'));
    });                 
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose1").click(function(){
    disablePopup($('#popupContact1'));
});
    $("#popupContactClose2").click(function(){
    disablePopup($('#popupContact2'));
});
    $("#popupContactClose3").click(function(){
    disablePopup($('#popupContact3'));
});
    $("#popupContactClose4").click(function(){
    disablePopup($('#popupContact4'));
});
    $("#popupContactClose5").click(function(){
    disablePopup($('#popupContact5'));
});
    $("#popupContactClose6").click(function(){
    disablePopup($('#popupContact6'));
});
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup(this);
    });
    //Press Escape event!
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact1'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact2'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact3'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact4'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact5'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact6'));
    }
});

});

so the problem is that when i try to use the keypress function to fadeout the div, only the background fades out leaving the div floating over the content pane. What is particularly weird is that the first instance of the code allows the fadeout on esc keypress but none of the others.

Any idea what might be going wrong?

Edit1: I realize that only the first $(document) call is working

    //Press Escape event!
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact1'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact2'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact3'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact4'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact5'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact6'));
    }
});

});

everything after the first call the background div fades and the text box is left over the container. If i switch the order of these calls and put disablePopup[($(‘#popupContact2’)) before the disablePopup[($(‘#popupContact1’)) then popupContact1 is left int he container on keypress but not popupContact2

edit: i realize that this question is a bit of a mess so I tried to be more clear in my execution.
if you would like to continue to figure out the problem please see the new question at the following link:
jquery popup window won't close on keypress

edit2: this was resolved – pointy suggested i add a class to each of the items i need to clse and just have the js close all open popups – worked like a charm thank you all for your help

Answer 1

I added a class to each id and used that to close instead – this worked like a charm

snackerfish