Question

I have two pop up dialog boxes for the links in the footer Return Policy and Privacy Policy . I have the javascript and all the files.

Currently only one of the pop up opens when both the links are clicked. I want each link to open its own respective pop up dialog box.

The webpage where this is located is at http://www.sarahjanetrading.com/js/j/index.html

The javascript file is located at http://www.sarahjanetrading.com/js/j/js/popups.js.

Thanks

Answer 1

You have the click tag on the surrounding span #dialog. So basicly no matter where you press in the span the same popup will open.

Then you display both Dialogs on top off eachother, with return policy being the last dialog, it overlays the other.

What you need to do is bind it to the links

$("#dialog a").click(function(){
    //centering with css
    centerPopup();
    //get id of the clicked
    var clickedLink = $(this).attr('id');
    //load popup
    loadPopup(clickedLink);
});

And then only show the click dialog:

function loadPopup(clickedLink){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $("#"+clickedLink).fadeIn("slow");
        popupStatus = 1;
    }
}

---

Updated version

You could get the dialog ID by using the href and then do it like:

<a href="#privacyPolicy-popup" id="returnPolicy">Return Policy</a>

And

$("#dialog a").click(function(){
    //centering with css
    centerPopup();
    //get id of the clicked
    var clickedLink = $(this).attr('href');
    //load popup
    loadPopup(clickedLink);
});

And

function loadPopup(clickedLink){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        });
        $("#backgroundPopup").fadeIn("slow");
        $(clickedLink).fadeIn("slow");
        popupStatus = 1;
    }
}