jQueryを使ったモーダル風ウィンドウの紹介です。レスポンシブも定義しております。
レスポンシブの画像も同じ画像を使用しています。サイズはＣＳＳにて変更しています。

今回使用したjquery.min.jsは、ver2.0.3です。

↓以下が実際のソースサンプルです。
▼JavaScript

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function modalwindows(){
	$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
			
	$("#glayLayer").click(function(){
		$(this).hide()
		$("#overLayer").hide();
	});
			
	$("a.modal").click(function(){
		var amodal=$(this)
		$("#glayLayer").fadeIn(500,function(){
			$("#overLayer").show().html("<img src='"+$(amodal).attr("href")+"'>");
		});
	return false;
	});
});
</script>

▼CSS

<style>
div#glayLayer {
	display:none;
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:black;
	filter:alpha(opacity=60);
	opacity: 0.60;
}
div#overLayer {
	display:none;
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-300px;
}
/* ====== スマートフォン用の設定(480px以下) ====== */
@media only screen and (max-width:480px) {

	img {
		width:450px;
		height:450px;
	}
	div#overLayer img {
		width:300px;
		height:300px;
	}
	div#overLayer {
		margin-top:-150px;
		margin-left:-150px;
	}

}

</style>

▼HTML

      <div class="gallery_box">
        <a href="images/photoA1.jpg" class="modal"><img src="images/photoA1.jpg"></a>
        <a href="images/photoA2.jpg" class="modal"><img src="images/photoA2.jpg"></a>
      </div>

デモページは、こちら