LightBox倒计时关闭

时间：2012-11-24 16:55:47

标签： javascript jquery lightbox

我的问题是我第一次看到计时器停机，但之后就变得奇怪了，最后浏览器崩溃了。

我在这里提供了给我错误的代码，这是一个巨大的事情，所以我不能把它全部放在这里。

JavaScript的：

// display the lightbox
function lightbox(insertContent) {

    // jQuery wrapper (optional, for compatibility only)
    (function($) {
        // add lightbox/shadow <div/>'s if not previously added
        if ($('#lightbox').size() === 0) {
            var theLightbox = $('<div id="lightbox"/>');
            var theShadow = $('<div id="lightbox-shadow"/>');
            var countDown = $('<div class="countDown"/>');
            $(theShadow).click(function(e) {
                closeLightbox();
            });
            $('body').append(theShadow);
            $('body').append(theLightbox);
            $('body').append(countDown);
        }

        // insert HTML content
        if (insertContent !== null) {
            $('#lightbox').html(insertContent);
            $('#lightbox').corner("15px");

            // ALWAYS LAST
            //$('#lightbox').append(countDown);
            CountDown(5);
        }

        // move the lightbox to the current window top + 100px
        $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');
        $('#lightbox-shadow').css('top', $(window).scrollTop());
        $('.countDown').css('top', $(window).scrollTop() + 150 + "px");

        // display the lightbox
        $('#lightbox').show();
        $('#lightbox-shadow').show();
        $('.countDown').show();

    })(jQuery); // end jQuery wrapper
}

function CountDown(tiempo) {
    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }
    var IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

// close the lightbox


function closeLightbox() {

    // jQuery wrapper (optional, for compatibility only)
    (function($) {

        // hide lightbox/shadow <div/>'s
        $('#lightbox').hide();
        $('#lightbox-shadow').hide();
        $('.countDown').hide();

        // remove contents of lightbox in case a video or other content is actively playing
        $('#lightbox').empty();

    })(jQuery); // end jQuery wrapper
};

$(document).ready(function() {
    $("#Login").click(function(event) {
        event.preventDefault();
        lightbox("Username Not Available");
        $("#lightbox").css("color", "#FF0000");
    });
});

HTML：

<input type="button" id="Login" value="Hello">

CSS：

#lightbox {
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    z-index: 1001;
    display: none;

    color: #069;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px #000;
}
#lightbox-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=90);
    -moz-opacity: 0.90;
    -khtml-opacity: 0.90;
    opacity: 0.90;
    z-index: 1000;
    display: none;
}

.countDown {
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    z-index: 1002;
    display: none;

    color: #069;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-variant: small-caps;
    font-weight: normal;
    margin: 10px auto;
    display: none;
}

的jsfiddle：

http://jsfiddle.net/c2gx9/6/

不知道为什么它对jsfiddle不起作用;它在我的电脑上运行良好。

2 个答案:

答案 0 :(得分：2)

只是一个建议，尝试使用jsbin而不是jsfiddle。你的小提琴在jsbin上比在jsfiddle上效果更好。

无论如何，在closeLightbox你正在执行$('#lightbox').empty();，这将删除所有孩子，但让父母留下。清除灯箱后的含义仍然是带有id灯箱的div。

第二次调用lightbox时，条件$('#lightbox').size() === 0的计算结果为false，因为该元素已存在。

要解决此问题，请将行$('#lightbox').empty();替换为$('#lightbox').remove();

代码的第二个问题是，您正在调用setInterval。 

function CountDown(tiempo) {
    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }

    var IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

js引擎将代码转换为类似

的代码 
function CountDown(tiempo) {
    var IntervalID;

    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }

    IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

IntervalID是函数的本地变量。每次调用该函数时，都会从头开始创建变量。所以实际上，你永远不会清除间隔。您只是递减tiempo变量。

“浏览器发疯”的可能原因是，只执行一次setInterval将重复调用指定的函数直到明确停止。在倒计时中，超过5次迭代，您将调用setInterval 5次。您可以想象，经过几次尝试后，浏览器会因所有这些同时运行的CountDown实例而过载。

以后如果您想使用setInterval，可能需要read the documentation at MDN。该网站是一个非常好的HTML，JS和PL的资源。 CSS。

最后，您将函数名称作为字符串参数传递给setInterval。出于各种原因，这有点令人不悦。我选择不这样做的原因是代码只有在函数可全局访问时才有效。为了封装而不污染全局命名空间，人们推荐其他方法。

回到如何解决这个问题，我应该第一次注意到setInterval错误。我没有，那是我的坏事。您找到了适合您的解决方案。为了完整起见，我将包括如何要求您修复它。 

function CountDown(tiempo) {
    if (tiempo <= 0) {
        closeLightbox();

    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;

        setTimeout(function () { 
            CountDown(tiempo);
        }, 1000);
    }
}

答案 1 :(得分：0)

在网上找到一些代码并且它最终有效，我现在使用的代码是：

JS：

// display the lightbox
function lightbox(insertContent){

    // jQuery wrapper (optional, for compatibility only)
    (function($) {
        // add lightbox/shadow <div/>'s if not previously added
        if($('#lightbox').size() === 0){
            var theLightbox = $('<div id="lightbox"/>');
            var theShadow = $('<div id="lightbox-shadow"/>');
            var countDown = $('<div id="countDown"/>');
            $(theShadow).click(function(e){
                closeLightbox();
            });
            $('body').append(theShadow);
            $('body').append(theLightbox);
            $('body').append(countDown);
        }

        // insert HTML content
        if(insertContent !== null){
            $('#lightbox').html(insertContent);
            $('#lightbox').corner("15px");

            // ALWAYS LAST
            $('#lightbox').append(countDown);
            CreateTimer(3);
        }

        // move the lightbox to the current window top + 100px
        $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');
        $('#lightbox-shadow').css('top', $(window).scrollTop());
        //$('#countDown').css('top', $(window).scrollTop() + 150 + "px");

        // display the lightbox
        $('#lightbox').show();
        $('#lightbox-shadow').show();
        $('#countDown').show();

    })(jQuery); // end jQuery wrapper

}

function CreateTimer(Tiempo) {
    TotalSeconds = Tiempo;

    UpdateTimer();
    window.setTimeout("Tick()", 1000);
}

function Tick() {
    if (TotalSeconds <= 1) {
        closeLightbox();
        return;
    }

    TotalSeconds -= 1;
    UpdateTimer();
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
    $('#countDown').html("Esta ventana se cerrará en " + TotalSeconds + " segundos");
}

// close the lightbox
function closeLightbox(){

    // jQuery wrapper (optional, for compatibility only)
    (function($) {

        // hide lightbox/shadow <div/>'s
        $('#lightbox').remove();
        $('#lightbox-shadow').remove();
        $('#countDown').remove();

        // remove contents of lightbox in case a video or other content is actively playing


    })(jQuery); // end jQuery wrapper

}
相关问题
最新问题