Question

I’m using this script which works fine for a single lightbox popup window. I need to modify it in order to add more buttons which will target specific popups, For example Button 1 opens window 1, button 2 opens window 2, etc..
Any help is appreciated!

jQuery:

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

            //loading popup 
            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
            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 
            $(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();
                    }
                });

            });

HTML:

            <div id="button"><input type="submit" value="Press" /></div>
                <div id="popupContact">
                    <a id="popupContactClose">x</a>
                    <h1>Button 1</h1>
                    <p id="contactArea">
                        button 1 content
                    </p>
                </div>
            <div id="backgroundPopup"></div>

Answer 1

There are a lot of ways to to do this, depending on functionality and layout. You might want to look at using something like $(this) and .next() or something similar. Very rough example would be.

$('#button').click(function() {
        $(this).next('.popupContact').show();
});

Obviously, you will need to expand on that to fit your code, and next may not be the best option depending on the final product. But based on the above HTML, that should do the trick. But you won’t need to name them different things if they are all the same. Just make them a class if they are going to be styled the same.