0

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

$(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>

演示

4

2 回答 2

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;
        });
于 2013-11-01T06:33:10.227 回答
0

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

于 2012-04-05T14:41:00.843 回答