2

我希望当用户点击我网站上的任何外部链接（由特定 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：有没有免费的插件呢？

4

3 回答 3

2

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

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

于 2013-06-01T14:55:35.143 回答
1

您不能使用确认本机对话框，因为这种对话框alert()会阻止所有脚本执行。您必须使用非阻塞的自定义对话框。

您可以使用例如：jquery UI 对话框

即使这有模式选项，这也不是 UI 阻塞。

于 2013-06-01T14:41:19.037 回答
0

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

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

}
于 2013-06-01T14:31:07.470 回答