Как добавить несколько ссылок в сценарий в стиле лайтбокса jQuery

Question

Я использую этот скрипт, который отлично работает для одного всплывающего окна лайтбокса. Мне нужно изменить его, чтобы добавить больше кнопок, которые будут нацелены на определенные всплывающие окна. Например, кнопка 1 открывает окно 1, кнопка 2 открывает окно 2 и т. Д. Любая помощь приветствуется!

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

Есть много способов сделать это, в зависимости от функциональности и макета. Возможно, вы захотите использовать что-то вроде $ (this) и .next () или что-то подобное. Очень грубый пример будет.

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

Очевидно, вам нужно будет расширить это, чтобы соответствовать вашему коду, и следующий может быть не лучшим вариантом в зависимости от конечного продукта. Но на основе приведенного выше HTML это должно сработать. Но вам не нужно будет называть их разными вещами, если они все одинаковые. Просто сделайте их классом, если они будут стилизованы одинаково.