嘗試構建jQuery Interstital div，但單擊鏈接時無任何操作

Question

我正在嘗試使用jquery構建以下操作：當用戶單擊鏈接時，mainContent div被隱藏，並且顯示exitSite消息。 然后，用戶有兩個選擇：返回主要內容或繼續並離開站點。

當前問題：單擊將離開站點的鏈接時，沒有任何反應。

這是我到目前為止的代碼：

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  
}
});

HTML：

離開網站的鏈接： 單擊到stackoverflow.com

退出網站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

您可以簡單地使用JavaScript confirm() 。 它不時尚，但卻是您想要做的最通用的方式。

$('a[href^="http://"]').on('click', function(e) { // apply to all external URLs
    return window.confirm('Are you sure you want to leave this site?');
});

概括地說，任何將return false; JavaScript函數return false; 從點擊處理程序中將取消該點擊，然后return true; 允許它繼續。

一種較不那么侵入且更常見的方法是將target="_blank"到任何外部鏈接。 這將在新的標簽/窗口中打開該鏈接，使您的網站保持在單獨的位置。

Answer 2

您的代碼中有一個基本的錯字。 您根本沒有顯示#exitSite div：

$('#mainContent').hide(); //hide main content window
$('#mainContent').show(); //show main content window

需要是：

$('#mainContent').hide(); //hide main content window
$('#exitSite').show(); //show exit confirmation window

演示： http ： //jsfiddle.net/jtbowden/fhFxU/1/

為了進行調試，我在點擊處理程序中使用了console.log("debug") ，並在FireBug中進行了觀察，以查看是否調用了點擊處理程序。 然后，我在腦海中逐步完成了該功能，以了解會發生什么。 從那時起，我注意到您從未顯示過退出確認信。

附帶說明一下，在處理程序中定義變量后，您還會缺少幾個分號。