javascript - Jquery：ライトボックスが自動的に閉じます:(

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>

デモ

Answer 1

これは、フォームがリロードされているときに発生します（ポストバックが発生します）...コードに「returnfalse」を追加して防止します...コードは次のようになります。

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

このコードで Tyrhttp://jsfiddle.net/sweetmaanu/yx6W3/