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);     

		//if Disagree word is clicked
		$('#disagree').click(function () {
				$(this).hide();
				$('.window').hide();
				$('#mask').hide();
				time_left = 0;
		}); 

		//if mask is clicked
		$('#mask').click(function () {
				$(this).hide();
				$('.window').hide();
		});     

});

var time_left = 3;
var cinterval;

document.getElementById('countdown').innerHTML = time_left;

var time_dec = function(){
	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);

#dialog {
	position: absolute;
	width: 300px;
	height: 220px;
	border: 1px solid #ccc;
	padding: 16px;
	top: 100px;
	left: 100px;
	z-index: 999;
	background: #fff;
}
#mask {
	z-index: 9;
	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">
	<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>

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

1 个答案: