我创建了一个倒计时日历,链接为:-http://www.project-progress.co.uk/westcoast/advent/
但是我有一个问题,当打开弹出窗口时单击“关闭”,然后您将无法重新打开该弹出窗口。
这是我的HTML:-
<ul>
<div class="left-title">
<img src="/westcoast/advent/wp-content/uploads/images/quizmass.jpg" width="280px" />
<p class="sh">Lorem ipsum dolor sit amet, ut cum omnis accumsan eleifend. Ei animal splendide eum, vis liber ocurreret forensibus.<br><br>
Lorem ipsum dolor sit amet, ut cum omnis accumsan eleifend. Ei animal splendide eum, vis liber ocurreret forensibus.
</p>
</div>
<li>
<div class="door">
<img src="/westcoast/advent/wp-content/uploads/images/days/1.png" />
<span>1</span>
</div>
<div class="door-popup">
<div class="half-l">
<img src="/westcoast/advent/wp-content/uploads/images/days/popup/1a.png"/>
</div>
<div class="half-r">
<div class="cross">
<img src="/westcoast/advent/wp-content/uploads/images/cross.png" />
</div>
<div class="pad">
detail </div>
</div>
<div class="clear"></div>
</div>
</li>
<li>
<div class="door">
<img src="/westcoast/advent/wp-content/uploads/images/days/2.png" />
<span>2</span>
</div>
<div class="door-popup">
<div class="half-l">
<img src="/westcoast/advent/wp-content/uploads/images/days/popup/2a.png"/>
</div>
<div class="half-r">
<div class="cross">
<img src="/westcoast/advent/wp-content/uploads/images/cross.png" />
</div>
<div class="pad">
detail </div>
</div>
<div class="clear"></div>
</div>
</li>
我的JQuery是:-
$(document).ready(function(){
var message = "";
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var scrolled = false;
var timeDelay = 200;
// function to reveal message
var cardReveal = function () {
$("#message").text(message).show();
}
day=1; //Comment me out
// Only work in December
if (month === 11) {
// Loop through each calendar window
$(".container ul li").each(function (index) {
var adventwindow = index + 1;
var item = $(this);
// Add words so far to message variable
if (adventwindow <= day) {
var word = words[index];
$(this).append('<div class="revealed">' + word + '</div>');
message = message + " " + word;
}
// On clicking a window, toggle it open/closed and
// handle other things such as removing jiggle and 25th
$(".container ul li").on("click", function () {
if (adventwindow <= day) {
$(this).children().find(".door").addClass("openlive");
$(this).children(".door-popup").fadeIn();
$(".overlay").fadeIn();
$(".door-popup").appendTo('body');
$(this).find('.openlive img, .openlive span').fadeOut();
setTimeout(function(){
$('.revealed').fadeIn();
}, 300);
event.stopPropagation();
}
//else {
//alert("Please check back on the correct day, to see more prizes")
//}
$(this).removeClass("jiggle");
});
});
$( ".cross" ).click(function() {
if($(this).parent().parent().css("display") == "block"){
$(this).parent().parent().hide();
$('.overlay').hide();
event.stopPropagation();
}
else{
}
});
}
});
有人有什么想法吗?好像我需要某种功能来重置单击十字的功能。
谢谢大家。 斯科特