css

<style type="text/css">

#mask {  
	  position:absolute;  
	  z-index:9000;  
	  background-color:#fff;  
	  display:none;  
	  left:0;
	  top:0;
	  width:100%;	
	  height:100%;	
	}
	
	.window{
	 	 z-index:10000;
	 	  display: none;
		  position:absolute;
		  top:25%;
		  left:25%;
		  
		  align-items:center;
		  justify-content:center;
		  -webkit-align-items:center;
		  -webkit-justify-content:center;
		
		  -webkit-box-pack:center;
		  -webkit-box-align:center;
		  -moz-box-pack:center;
		  -moz-box-align:center;
		  -ms-box-pack:center;
		  -ms-box-align:center;
	  }
	  
	.window .close{
		float:right;
		
	}
	
	.imgSelect {
		 display:none; 
		
	}
	
	.openMask:hover{
		cursor: -moz-zoom-in; 
	    cursor: -webkit-zoom-in; 
	    cursor: zoom-in;
		
	}
	 

	.imgSelectDiv {
		position: relative; 
	}
	#zoomImg{
 		cursor : move;
        z-index : 1;
     }
</style>

 

 

html

<div id="mask"></div>
	<div class="window">
		<a href="#" class="close"><img src="/images/select.png">
		</a>
		
<img id="zoomImg" src="http://imagecomposer.fluidretail.net/generate/?view=Back&recipe=2%2C13%2C0%2C1%2C1%2C-1%2C-1%2C0%2C2%2C-1%2C-1%2C-1%2C0%2C-1%2C0%2C1%2C0%2C-1%2C-1%2C0%2C14&workflow=prod&environment=prod&customerId=1479&productId=20900&configVersion=1467931264373&publishedTime=07%2F07%2F2016%2022%3A41%3A04&purpose=serverDisplay&format=png&trim=false&padding=0&scale=1&binary=true" >
 	
</div>


<div  class="imgDisplay">
<div style="position: absolute;">
<div class="imgSelectDiv">
<a href="#"><img src="/images/select.png" class="imgSelect" /></a>
</div>
</div>
<a href="#" class="openMask"><img src="http://braverokmc.dothome.co.kr/include/images/beautiful/77.jpg" ></a>
</div>	

 

 

 

javacsript

<script src="https://code.jquery.com/jquery-latest.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>	
	function wrapWindowByMask(){
		//화면의 높이와 너비를 구한다.
		var maskHeight = $(document).height();  
		var maskWidth = $(window).width();  
		
		var imgWidth =(maskWidth/10)*9;
		var imgHeight=(maskHeight/10)*9;
		
		var	imageWidthmargin=(maskWidth-imgWidth)/2;
		var imageHeightmargin=(maskHeight-imgHeight)/2;
		
		//alert("maskHeight : "+ maskHeight+ "imgHeight : " +imgHeight + ", imageHeightmargin: " + imageHeightmargin);
		
	
		imgHeight='100%';	
		 
		//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
		$('#mask').css({'width':maskWidth,'height':maskHeight});  

		//애니메이션 효과 - 일단 1초동안 까맣게 됐다가 80% 불투명도로 간다.
		$('#mask').fadeIn(10);      
		$('#mask').fadeTo("slow",0.5);    

		//이미지 사이즈 조절
	
		$('.window').css('left', '0px');
		
		$('.window').css('margin-left', imageWidthmargin+'px');
		imageHeightmargin =-imageHeightmargin -100;
		$('.window').css('margin-top', imageHeightmargin+'px');
	
		
		$('.window >img').css({'width':imgWidth,'height':imgHeight});
		
		//윈도우 같은 거 띄운다.
		$('.window').show();
	}

$(document).ready(function(){

		
	
		//검은 막 띄우기
		$('.openMask').click(function(e){
			e.preventDefault();
			wrapWindowByMask();
		});

		//닫기 버튼을 눌렀을 때
		$('.window .close').click(function (e) {  
		    //링크 기본동작은 작동하지 않도록 한다.
		    e.preventDefault();  
		    $('#mask, .window').hide();  
		});       

		//검은 막을 눌렀을 때
/* 		$('#mask').click(function () {  
		    $(this).hide();  
		    $('.window').hide();  
		});
		 */
		
		// 터치 스크린에서 실수로 레이어를 닫는 경우를 막으려면.
		$('#mask').one('touchstart', function () {  
		    $(this).unbind('click');
		   // alert('터치 이벤트일 때는 아무 일도 안 일어난다.');
		});
			 
		 $(".openMask img").mouseover(function(){		
			 var imgW=$(".openMask img").width();
			 var imgH=$(".openMask img").height();
			 
			 $(".imgSelectDiv").css("top", (imgH/2-40)+'px');
			 $(".imgSelectDiv").css("left", (imgW/2-40)+'px');
		
			 if($(".imgSelect").css("display") == "none"){
					$(".imgSelect").show();
			  }
			 
		 });
		 
		 
 		 $(".imgDisplay").mouseout(function(){
 			
 			if($(".imgSelect").css("display") != "none"){
 				
 				$(".imgSelect").hide();

 			}
 			 
		 }); 
		 
		  

 		 $("#zoomImg").draggable();
 /* 		 
 		 $('#zoomImg').dblclick(function(event){
 		    //    $('img').bind('dblclick', function(event){  
 		            var $target = $(this); // $(event.target);
 		            $target.width($target.width()+100);  // 나누기는 축소
 		            $target.height($target.height()+100);
 		 }); */
 		
 			
		
});

</script>