Javascript倒計時和重定向 - 第2部分

Question

我有一個運行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但在網頁本身）：

<script src="popup.js"></script>

var time_left = 12; 
var cinterval; 

function time_dec(){ 
time_left--; 
document.getElementById('countdown').innerHTML = time_left; 
if(time_left == 1){ 
    var originalstring = document.getElementById('countdown2').innerHTML; 
    var newstring = originalstring.replace('seconds','second'); 
    document.getElementById('countdown2').innerHTML = newstring; 
    window.location.replace("http://cadfemukandireland.com/"); 
    clearInterval(cinterval); 
} 
} 

cinterval = setInterval('time_dec()', 1000); 

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

Answer 1

嘗試下面的代碼 - 它基本上歸零離開的時候被點擊

我也分配time_dec函數變量更容易作用域

$(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);  
 

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

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

 
}); 
 

 
var time_left = 3; 
 
var cinterval; 
 

 
document.getElementById('countdown').innerHTML = time_left; 
 

 
var time_dec = function(){ 
 
\t time_left--; 
 
\t document.getElementById('countdown').innerHTML = time_left; 
 
\t if(time_left == 1){ 
 
\t \t \t var originalstring = document.getElementById('countdown2').innerHTML; 
 
\t \t \t var newstring = originalstring.replace('seconds','second'); 
 
\t \t \t document.getElementById('countdown2').innerHTML = newstring; 
 
\t \t \t window.location.replace("http://cadfemukandireland.com/"); 
 
\t \t \t clearInterval(cinterval); 
 
\t } 
 
} 
 

 
cinterval = setInterval(time_dec, 1000);

#dialog { 
 
\t position: absolute; 
 
\t width: 300px; 
 
\t height: 220px; 
 
\t border: 1px solid #ccc; 
 
\t padding: 16px; 
 
\t top: 100px; 
 
\t left: 100px; 
 
\t z-index: 999; 
 
\t background: #fff; 
 
} 
 
#mask { 
 
\t z-index: 9; 
 
\t background: rgba(0,0,0,0.6) 
 
}

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