显示隐藏弹出窗口的jQuery问题

时间:2018-11-27 15:58:58

标签: javascript jquery html css

我创建了一个倒计时日历,链接为:-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{
            }

        }); 







    }

});

有人有什么想法吗?好像我需要某种功能来重置单击十字的功能。

谢谢大家。 斯科特

0 个答案:

没有答案