External Link Notification - JavaScript or JQuery

Question

I am looking for a way to set it up so that when an external link is clicked it will warn people that they are leaving the site. Preferably, it would darken the screen and displ

Answer 1

To identify just external links you might do something like this:

var ignoreClick = false;

$(document).ready( function(){

    $('input[type="submit"], input[type="image"], input[type="button"], button').click(function(e) {
        ignoreClick = true;
    });

    $(document).click(function(e) {
        if($(e.target).is('a')) 
            checkLink(e);
    });

    $('a').click(function(e) {
        checkLink(e);
        return true;
    });

    checkLink = function(e){
        // bubble click up to anchor tag
        tempTarget = e.target;
        while (!$(tempTarget).is('a') && !!tempTarget.parentElement) {
            tempTarget = tempTarget.parentElement;
        } 

        if ($(tempTarget).is('a')){

            if(!!tempTarget && $(tempTarget).is('a') && 
                (tempTarget.hostname == "" || tempTarget.hostname == "#" || tempTarget.hostname == location.hostname)){
                    ignoreClick = true;
            }

        }
    }

});

and to catch people with a message you might use beforeunload and the confirm option

$(window).bind("beforeunload", function (e) {
     if (!ignoreClick){
         if(!confirm("Leaving website message")) {
             e.preventDefault();
         }
     }
});

Answer 2

It worked pretty well to me. I just removed unnecesary variables, but original script worked fine.

$('a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
})
.click(function () {
    return window.confirm('You are about to proceed to an external website.  The Great Western Market has no control over the content of this site.  Click OK to proceed.');
});

http://jsfiddle.net/3dkAN/1/

EDIT

Following @user1308743's line, seems that in cgmp.framework.min.js is summoning the jQuery.noConflict() mode, that unbinds the $() function for jQuery. So please use jQuery() for any jQuery implementation

Answer 3

Try using confirm instead of alert since that will pause and wait for user input. You'll then need function(e){ e.preventDefault(); } to prevent the default link actions.

Answer 4

Your filter logic should be correct, Try using the confirm function, and using jQuery instead of $.

jQuery('a').filter(function() {
    return this.hostname && this.hostname !== location.hostname;
  }).click(function(e) {
       if(!confirm("You are about to proceed to an external website."))
       {
            // if user clicks 'no' then dont proceed to link.
            e.preventDefault();
       };
  });

I tried this out in dev tools on your site and it seems to work correctly if you use jQuery. I think you may have some plugin that is causing conflicts with $.

JSFiddle Demo