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 display a message in the middle of the screen in a box with the option to click OK or Cancel.

I tried to use this code:

  $("a.external").click(function () {
      alert("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.");
  });

and give each link a class of external but it doesn't seem to work. I don't want to use this because it means that the client will have to remember to add the class I would prefer something more automatic.

I also tried to use this code to do so but to no avail:

 $('a').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
      })
      .click(function () {
          var x=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.');
            var val = false;
            if (x)
                val = true;
            else
                val = false;
            return val;
        });

I am using WordPress 3.8.1.

Thanks in advance for any help you can give.

Answer 1

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

Answer 2

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 3

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 4

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