Question

灯箱会在几秒钟内自动关闭。你能帮帮我吗

$(document).ready(function(){
    $('.lightbox').click(function(){
        $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
        $('.box').animate({'opacity':'1.00'}, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });

    $('.close').click(function(){
        close_box();
    });

    $('.backdrop').click(function(){
        close_box();
    });

});

function close_box()
{
    $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
        $('.backdrop, .box').css('display', 'none');
    });
}

CSS

    .backdrop
    {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        background:#000;
        opacity: .0;
        filter:alpha(opacity=0);
        z-index:50;
        display:none;
    }


    .box
    {
        position:absolute;
        top:20%;
        left:30%;
        width:500px;
        height:300px;
        background:#ffffff;
        z-index:51;
        padding:10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow:0px 0px 5px #444444;
        -webkit-box-shadow:0px 0px 5px #444444;
        box-shadow:0px 0px 5px #444444;
        display:none;
    }

    .close
    {
        float:right;
        margin-right:6px;
        cursor:pointer;
    }

HTML

 <a href="" class="lightbox">Open Lightbox</a>

 <div class="backdrop">
    <div class="box"><div class="close">x</div>This is the lightbox!!!</div>
 </div>

DEMO

Answer 1

当窗体重新加载时会发生这种情况（发生回发）...通过在代码中添加“return false”来阻止它...所以你的代码就像...

  $('.lightbox').click(function(){
            $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
            $('.box').animate({'opacity':'1.00'}, 300, 'linear');
            $('.backdrop, .box').css('display', 'block');
             return false;
        });

Answer 2

Tyr使用此代码http://jsfiddle.net/sweetmaanu/yx6W3/

Jquery：灯箱自动关闭:(

2 个答案: