ライトボックスを中央に配置して反応させる

Question

ライトボックススライドショープロジェクト用のこの単純な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 
 
\t \t { 
 
\t \t \t font-family: Helvetica, Arial; 
 
\t \t } 
 

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

 

 
\t \t .box 
 
\t \t { 
 
\t \t \t position:absolute; 
 
\t \t \t top:20%; 
 
\t \t \t left:30%; 
 

 
\t \t \t background:#ffffff; 
 
\t \t \t z-index:51; 
 
\t \t \t padding:10px; 
 
\t \t \t -webkit-border-radius: 5px; 
 
\t \t \t -moz-border-radius: 5px; 
 
\t \t \t border-radius: 5px; 
 
\t \t \t -moz-box-shadow:0px 0px 5px #444444; 
 
\t \t \t -webkit-box-shadow:0px 0px 5px #444444; 
 
\t \t \t box-shadow:0px 0px 5px #444444; 
 
\t \t \t display:none; 
 
\t \t } 
 
    .caption { 
 
     padding-top: 10px; 
 
    }

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

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

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

Answer 1

以下チェックコード。 .boxを中心にして、画像の幅に相対的な幅を、left:50%;top:50%;（絶対ボックスが相対的な親の幅（この場合はbody）の幅に依存する値）と、transform:translate(-50%;-50%)（値は.boxの寸法で）、垂直方向と水平方向の中心になります。

plus。 max-width:100%を画像に追加すると、異なる画面で反応するようになります。

これが何をしたい

チェックスニペットやJsfiddle

$(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: 50%; 
 
    transform: translate(-50%,-50%); 
 
    left: 50%; 
 

 
    text-align: center; 
 
    z-index: 51; 
 
    padding: 10px; 
 
    display: none; 
 
    
 
\t -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; 
 
    border: 10px solid #fff; 
 
} 
 

 
.box img { 
 
    max-width: 100%; 
 
    width: 500px; 
 

 
} 
 

 
.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" /> 
 
    <div class="caption">CAPTION!!!!</div> 
 
</div>

をいじるあるなら、私に知らせて