I am trying to build the following action using jquery: when a user clicks on a link, the mainContent div is hidden and the exitSite message is shown. The user then has two choices: to return to the main content or to proceed and leave the site.
The current issue: when clicking a link that will leave the site, nothing happens.
Here is the code I have so far:
the JQuery:
$(function(){
if($('div#exitSite'))
{
var mydomain$ = location.hostname;
var links = $('a').each(function()
{
if((this.href.indexOf("mySiteDomain")==-1) && (this.href.indexOf(mydomain$)==-1) && (this.href.indexOf("javascr")==-1))
$(this).addClass('exit');
});
/*Off site links.*/
$('a.exit').live('click', function (e) {
e.preventDefault(); //stop the click from going through.
var page = $(this).attr("href") //get destination page
var pagetitle = $(this).attr("title")
$('#mainContent').hide(); //hide main content window
$('#mainContent').show(); //show main content window
$('#exitSiteClose').click(function() {
$('#exitSite').hide();
$('#mainContent').show();
return false
}); // end click #exitSiteClose
$('#exitSiteContinue').click(function() {
window.location=page
//if user selects the continue button, then pass in the destination page from link.
}); // end click #exitSiteContinue
});// end click a.exit
}
});
the html:
link leaving site: click to stackoverflow.com
the exit site div:
<div id="exitSite">
<h2>Hello!</h2>
<p><strong>You are leaving this website</strong></p>
<div class="buttonContainer">
<a href="#" id="exitSiteClose" class="btn-gray">Cancel</a>
<a href="#" id="exitSiteContinue" class="btn-blue">Continue</a>
</div><!-- /.buttonContainer -->
</div><!-- /#exitSite -->
You could simply use a JavaScript confirm()
. It's not stylish, but it's the most universal way to do what you want.
$('a[href^="http://"]').on('click', function(e) { // apply to all external URLs
return window.confirm('Are you sure you want to leave this site?');
});
Broadly speaking, any JavaScript function that will return false;
from a click handler will cancel that click, and one that will return true;
allows it to continue.
A less intrusive, and more common, approach is to add target="_blank"
to any external links. This will open that link in a new tab/window, keeping your site open in a separate one.
You have a basic typo in your code. You are not showing your #exitSite
div at all:
$('#mainContent').hide(); //hide main content window
$('#mainContent').show(); //show main content window
Needs to be:
$('#mainContent').hide(); //hide main content window
$('#exitSite').show(); //show exit confirmation window
Demo: http://jsfiddle.net/jtbowden/fhFxU/1/
To debug, I used console.log("debug")
inside the click handler and watched in FireBug to see if the click handler was being called. Then I mentally stepped through the function to see what should happen. That's when I noticed you never showed your exit confirmation.
As a side note, you are also missing a couple semi-colons after your variable definitions in the handler.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.