Question

我希望当用户点击我网站上的任何外部链接（由特定ID或类别标识）时，他应该获得一个10秒钟的计时器弹出窗口，10秒后弹出窗口应该关闭，用户应该能够访问外部URL。如何才能做到这一点？我能够显示如下所示的警告，但我不知道如何添加超时，这也是confirm框，而不是弹出窗口，我可以添加一些div和更多东西让用户看到计数器停止。

$(document).ready(function(){

var root = new RegExp(location.host);

$('a').each(function(){

    if(root.test($(this).attr('href'))){ 
        $(this).addClass('local');
    }
    else{
        // a link that does not contain the current host
        var url = $(this).attr('href');
        if(url.length > 1)
        {
            $(this).addClass('external');
        }
    }
});

$('a.external').live('click', function(e){

    e.preventDefault();
    var answer = confirm("You are about to leave the website and view the content of an external website. We cannot be held responsible for the content of external websites.");

    if (answer){
        window.location = $(this).attr('href');
    } 

});

});

PS：这有免费的插件吗？

Answer 1

我已经整理了一个小小的演示来帮助你。首先要注意的是，您需要在JavaScript中使用setTimeout函数。其次，确认框和警告窗口不会为您提供所需的灵活性。所以这是我的HTML首先我显示一个简单的链接，然后创建一个将在用户视图中隐藏的弹出窗口。

<a href='http://www.google.com'>Google</a>

<div id='popUp' style='display:none; border:1px solid black;'>
    <span>You will be redirected in</span>
    <span class='counter'>10</span>
    <span>Seconds</span>
    <button class='cancel'>Cancel</button>
</div>

接下来，我创建了一个控制弹出窗口显示方式的对象，并在弹出窗口中处理相关事件。这主要是为了将我的弹出代码保存在一个地方，所有事件都集中在对象中。

$('a').live('click', function(e){

    e.preventDefault();
    popUp.start(this);    
});

$('.cancel').click(function()
                   {
                       popUp.cancel();
                   });

var popUp = (function()
{
    var count = 10; //number of seconds to pause
    var cancelled = false;

    var start = function(caller)
    {
         $('#popUp').show();
        timer(caller);
    };
    var timer = function(caller)
    {
        if(cancelled != true)
        {
            if(count == 0)
            {
                finished(caller);
            }
            else
            {
               count--;
                $('.counter').html(count);
               setTimeout(function()
                          {
                              timer(caller);
                          }, 1000);
            }
        }
    };  
    var cancel = function()
    {
        cancelled = true;
        $('#popUp').hide();
    }
   var finished = function(caller)
     {
        alert('Open window to ' + caller.href); 
     };

    return {
        start : start,
        cancel: cancel
    };
}());

如果您跑步，您将看到弹出窗口显示并且倒计时正在倒计时。当然还有一些调整需要，但你应该能够看到完成任务的总体思路。希望它有所帮助！

JS小提琴示例：http://jsfiddle.net/u39cV/

Answer 2

您无法使用确认本机对话框，因为此类对话框（{1}}正在阻止所有脚本执行。您必须使用非阻塞的cutomized对话框。

您可以使用例如：jquery UI dialog

即使这有模态选项，也不是UI阻止。

Answer 3

Consdier使用javascript setTimeout函数在给定延迟后执行操作

if (answer){
    setTimeOut(function(){
       //action executed after the delay
       window.location = $(this).attr('href');
    }, 10000); //delay in ms

}

打开外部链接时显示超时警告

3 个答案: