尝试构建jQuery Interstital div，但单击链接时无任何操作

Question

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 -->

Answer 1

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.

Answer 2

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.