中心灯箱窗口，使其响应

Question

我为灯箱幻灯片项目创建了这个简单的JQuery代码。 到目前为止它还顺利，但我希望你能帮助我让这个窗口变得有用吗？

要成功的数学/代码是什么？

谢谢！

＆＃13;

＆＃13;

$(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');
      });
    }

＆＃13;

body
		{
			font-family: Helvetica, Arial;
		}

		.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%;

			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;
		}
    .caption {
      padding-top: 10px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hasaboo</h1>
	<a href="#" class="lightbox">Open Lightbox</a>

	<div class="backdrop"></div>
	<div class="box">

    <img src="http://www.dan-dare.org/FreeFun/Images/PrinceOfPersiaWallpaper21024.jpg" width="500"/>
    <div class="caption">CAPTION!!!!</div>
</div>

＆＃13;

＆＃13;

＆＃13;