Адлюстраванне папярэджання з тайм-аўту пры адкрыцці знешніх спасылак

Я хачу, каб, калі карыстальнік націскае на любы знешняй спасылцы (ідэнтыфікаванага небудзь пэўным ідэнтыфікатарам або класа) на маім сайце, то ён павінен атрымаць ўсплывальнае акно са лічыльнікам на 10 секунд, пасля 10 секунд, ўсплывальнае акно варта зачыніць, і карыстальнік павінен мець магчымасць доступ да знешняй URL. Як гэта можна зрабіць? Я магу паказаць папярэджанне, як паказана ніжэй, але я не ведаю, як дадаць таймаўт да яго, а таксама гэта пацверджання у поле, а не ўсплывальнае акно, дзе я магу дадаць 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: Ці ёсць бясплатны убудова для гэтага?

2

6 адказы

Я сабраў невялікую дэманстрацыю, каб дапамагчы вам. Першае, што трэба ведаць пра тое, ваш будзе трэба выкарыстоўваць функцыю SetTimeout ў JavaScript. Па-другое, пацверджанне скрынкі і абвесткі вокны не дасць вам неабходную гнуткасць. Дык вось мой HTML першага я паказваю простую спасылку, а затым стварыў ўсплывае DIV, які будзе скрыты ад карыстальнікаў прагляду.

Google

<div id='popUp' style='display:none; border:1px solid black;'>
    You will be redirected in
    10
    Seconds
    <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 Fiddle Sample: http://jsfiddle.net/u39cV/

2
дададзена
О, як толькі ў вас ёсць дыялог з карыстальнікам правадной да Я таксама рэкамендую выкарыстоўваць убудова для адлюстравання карыстацкага ўсплывае акна, як jQueryUI, Twitter Bootstrap, або просты Modal
дададзена аўтар cgatian, крыніца

Я сабраў невялікую дэманстрацыю, каб дапамагчы вам. Першае, што трэба ведаць пра тое, ваш будзе трэба выкарыстоўваць функцыю SetTimeout ў JavaScript. Па-другое, пацверджанне скрынкі і абвесткі вокны не дасць вам неабходную гнуткасць. Дык вось мой HTML першага я паказваю простую спасылку, а затым стварыў ўсплывае DIV, які будзе скрыты ад карыстальнікаў прагляду.

Google

<div id='popUp' style='display:none; border:1px solid black;'>
    You will be redirected in
    10
    Seconds
    <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 Fiddle Sample: http://jsfiddle.net/u39cV/

2
дададзена
О, як толькі ў вас ёсць дыялог з карыстальнікам правадной да Я таксама рэкамендую выкарыстоўваць убудова для адлюстравання карыстацкага ўсплывае акна, як jQueryUI, Twitter Bootstrap, або просты Modal
дададзена аўтар cgatian, крыніца

Вы не можаце выкарыстоўваць ўласнае дыялогавае акно пацверджання, як гэты від дыялогу, як абвесткі() , блакуеце ўсе выкананне скрыпту. Вы павінны выкарыстоўваць cutomized дыялогавага акна без блакавання.

You can use for example: jquery UI dialog

Нават гэта мае мадальны варыянт, гэта не блакуючы UI.

1
дададзена

Вы не можаце выкарыстоўваць ўласнае дыялогавае акно пацверджання, як гэты від дыялогу, як абвесткі() , блакуеце ўсе выкананне скрыпту. Вы павінны выкарыстоўваць cutomized дыялогавага акна без блакавання.

You can use for example: jquery UI dialog

Нават гэта мае мадальны варыянт, гэта не блакуючы UI.

1
дададзена

Consdier з дапамогай JavaScript SetTimeout для выканання дзеяння пасля дадзенай затрымкі

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

}
0
дададзена

Consdier з дапамогай JavaScript SetTimeout для выканання дзеяння пасля дадзенай затрымкі

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

}
0
дададзена