How to show a javascript confirmation box on “WordPress menu” before leaving the website

Question

I wants to show a javascript message box when a user clicks on a "FORUM" link on WordPress menu.

The message box should show a message like "You are leaving this website..." and once the user confirms the message box, it should open an external link in a new tab.

I had tried this , but it will fire the message box, when ever I leave the website or reload the page. I just wants this message box on a single WordPress menu item.

I saw some tutorials to do this, but not able to do it on WordPress menu.

WordPress does not recognize javascript:void(0) or any other javascript function on URL part.

Any ideas??

Answer 1

Do you have jQuery loaded? Where is the forum link? Where's the code?

<a href="http://www.yourforum.com" onclick="return confirm('Are you sure you want to leave?');" />

Answer 2

Set the link location to something like this:

javascript: if (confirm('Are you sure you want to leave?')) {window.open('http://www.yourforum.com','_blank');}

which should generate html like:

<a href="javascript: if (confirm('Are you sure you want to leave?')) {window.open('http://www.yourforum.com','_blank');}">Link</a>

I tested this in JS fiddle, seems to work, so you should be able to put this as the link location in your database.

Edit:

// for a new tab
window.open(url,'_blank');
// for a redirect in same window
window.location=url;

Answer 3

If you can add any javascript to your page, anywhere, you can do the following (Needs jQuery, but you said you have that loaded):

$("a[href='http://example.com/forum']").click(function() {
    alert("Good bye!");
    return true;
});

Answer 4

Finally I got it working. I'm explaining it step by step, so someone with similar issue can solve this:

1. Put # in your wordpress menu url in which you want the JavaScript Function.
2. Track this menu url (li ID) link from source code. in my case li id is menu-item-88 . (this id is auto generated by wordpress and always unique)
3. Place the following code before the end of head tag (open header.php find </head> ) of current theme.
4. Don't forget to change the menu-id menu-item-88 to yours.

<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function(){
var menuID = jQuery('#menu-item-82');

findA = menuID.find('a');

findA.click(function(event){
if(confirm("YOU ARE LEAVING THE WEBSITE" + '\n' + "" + '\n' + "You are about to leaving the website to go to the external forum" + '\n' + "" + '\n' + "The FORUM will open in a new tab")) 
{
window.open('http://www.yourforum.com/','_blank'); //This will open the website in a new tab
}

});
});
</script>

This requires jQuery. So if jQuery is not loaded, add the following line also to your head.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

This will prompt you that, you are leaving the website. If you clicks OK, it will open the given link in a new tab.

Ok. Thats all.. This will do the magic.