Javascript倒计时和重定向-第2部分

我有一个网页，运行一个JavaScript模式弹出框，其中有一条消息通知访问者，他们将在XX秒内重定向到我们的新网站。它还有两个链接，分别是“同意”（然后重定向）和“不同意”（保留在旧网站/当前网站）

这一切似乎都很好，但我希望它能在用户单击不同意链接和/或单击弹出框（称为

#mask

）外的暗区时停止重定向

我怎样才能让它工作下面是JS代码

以下是弹出框JS代码：

$(document).ready(function() {  

    var id = '#dialog';

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    $('#mask').fadeIn(500); 
    $('#mask').fadeTo("slow",0.9);  

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);     

//if Disagree word is clicked
$('#disagree').click(function () {
    $(this).hide();
    $('.window').hide();
    $('#mask').hide();
}); 

//if mask is clicked
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
});     

});

这里是倒计时代码（不像上面的popup.js那样是外部的，而是页面本身）：

HTML代码是：

<div id="boxes">
<div id="dialog" class="window">
<p>We are currently in the process of upgrading our current website to a new and improved version.</p>
<p>You will automatically be directed to the new website <span id="countdown2">in <span id="countdown">12</span> seconds</span>.</p>
<div id="popupfoot"> <a href="http://cadfemukandireland.com/" >I agree</a> |    <a id="disagree" style="color:red;">I disagree</a> </div>
</div>
<div id="mask"></div>
</div>

我们目前正在升级我们目前的网站到一个新的和改进的版本

您将在12秒内自动转到新网站

|我不同意

尝试下面的代码-它基本上会将单击“不同意”时剩余的时间归零

我还将

time\u dec

函数分配给了一个变量，以便于范围界定

$（文档）.ready（函数（）{
变量id='#对话框'；
//获取屏幕的高度和宽度
var maskHeight=$（document.height（）；
var maskWidth=$（window.width（）；
//设置遮罩的高度和宽度以填充整个屏幕
$（'#mask'）.css（{'width'：maskWidth，'height'：maskHeight}）；
//过渡效应
$（'面具'）.fadeIn（500）；
$（#mask'）.fadeTo（“慢”，0.9）；
//获取窗口的高度和宽度
var winH=$（window.height（）；
var winW=$（window.width（）；
//将弹出窗口设置为居中
$（id）.css（'top'，winH/2-$（id）.height（）/2）；
$（id）.css（'left'，winW/2-$（id）.width（）/2）；
//过渡效应
美元（id）.fadeIn（2000年）；
//如果不同意，则单击单词
$（'#不同意'）。单击（函数（）{
$（this.hide（）；
$（'.window'）.hide（）；
$（“#掩码”）.hide（）；
剩余时间=0；
}); 
//如果单击了“遮罩”
$（“#掩码”）。单击（函数（）{
$（this.hide（）；
$（'.window'）.hide（）；
});     
});
var时间_左=3；
辛特瓦尔变种；
document.getElementById（'countdown'）。innerHTML=剩余时间；
变量时间=函数（）{
时间离开了--；
document.getElementById（'countdown'）。innerHTML=剩余时间；
如果（左时间==1）{
var originalstring=document.getElementById（'countdown2'）.innerHTML；
var newstring=originalstring.replace（'seconds'，'second'）；
document.getElementById（'countdown2'）。innerHTML=newstring；
window.location.replace（“http://cadfemukandireland.com/");
清除间隔（cinterval）；
}
}
cinterval=设定间隔（时间为1000）
#对话框{
位置：绝对位置；
宽度：300px；
高度：220px；
边框：1px实心#ccc；
填充：16px；
顶部：100px；
左：100px；
z指数：999；
背景：#fff；
}
#面具{
z指数：9；
背景：rgba（0,0,0,0.6）
}

我们目前正在升级我们目前的网站到一个新的和改进的版本

您将在12秒内自动转到新网站

|我不同意
如果您在等待用户同意/不同意，为什么要设置计时器？你甚至可以使用例如
confirm（'stay or go'）
我认为，因为如果用户没有做出选择，那么我们无论如何都会重定向它们。但这是一个想法，如果我不能让它工作，那么我可能别无选择，只能使用你的建议，但这并不理想，因为这不是老板想要的。此外，该功能将使用对话框，但我想保留弹出窗口。测试页面可以在这里找到：添加了新的答案@alexThat没有工作..计时器根本没有倒计时，不同意链接现在没有做任何事情，它使用的是一个对话框，而不是以前的模型弹出框，背景变暗了。上面的代码就在这里。您是否单击了
运行代码片段
链接？它会倒计时，直到您单击
不同意
链接或达到0。你没有提供任何css，所以我用掩码/对话框来弥补它-这绝对有效Hi Darren，你是对的，我使用了我自己的css，现在一切都很好。感谢您的帮助、时间和患者。嗨，Darren，有没有办法在用户访问网站时只运行一次上述操作，而不是每次他们进入页面时都运行？是的，如果你想要的话，我会在用户身上放一个cookie-随便你叫它什么，然后检查cookie是否存在，如果它没有任何作用
<div id="boxes">
<div id="dialog" class="window">
<p>We are currently in the process of upgrading our current website to a new and improved version.</p>
<p>You will automatically be directed to the new website <span id="countdown2">in <span id="countdown">12</span> seconds</span>.</p>
<div id="popupfoot"> <a href="http://cadfemukandireland.com/" >I agree</a> |    <a id="disagree" style="color:red;">I disagree</a> </div>
</div>
<div id="mask"></div>
</div>