中心灯箱窗口，使其响应(Center lightbox window and make it responsive)

 我为灯箱幻灯片项目创建了这个简单的JQuery代码。 到目前为止一切顺利，但我希望你能帮助我让这个窗口具有代表性吗？ 
 
 这样做的数学/代码是什么？ 
 
 谢谢！ 
 
 
 
 
 
  
$(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');
      });
    }
 
  
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;
    }
 
  
<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>
 
 
 
 

I've created this simple JQuery code for lightbox slideshow project. So far it's going well, but I would like you to please help me make this window reponsive?
 
What's the math/code to make it so?
 
Thank you!
 
 
 
 
 
  
$(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');
      });
    }
 
  
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;
    }
 
  
<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>
 
 
 
 

原文：https://stackoverflow.com/questions/44043509