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

Question

Hi folks,

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.

Answer 1

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() fucntion
 $("#dialog").dialog();
});

</script>

Needed HTML:

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