CODEWITHSUNDEEP
ajaxpopupmodal-dialoghttp-referer
Disco
Disco

Reputation: 515

AJAX modal dialog, fire onload if referer == <whatever>

I'm trying to change my index.html to show a modal window if the referer to my site == (eg, if they come from Google, show a "Welcome Googler" dialog box with an image inside of it).

I'm using FancyBox, but I'm not married to it.

Any suggestions on how to code it? I'm a C++ programmer -- Javascript isn't my forte, so straight examples would be very much appreciated.

Thanks in advance.

Upvotes: 0

Views: 4023

Answers (1)

helloandre
helloandre

Reputation: 10721

You're going to need a couple things: document.referrer, and jQuery UI. jQuery UI makes dialog boxes trivially easy.

You can find an in depth example from the documentation page but for the most part, this is what you are going to need:

<script type="javascript/text">
    if (document.referrer.indexOf('google.com') > -1){
        $("#my-dialog").dialog("open");
    }

    // this is the jquery code to set up the dialog box
    $(function() {
            // options would go inside the dialog() function
    $("#dialog").dialog();
});

</script>

Needed HTML:

<div id="my-dialog">
This is where things get displayed
</div>

Upvotes: 3

Related Questions