點擊放大圖片預覽

創造一個自適應的盒子，跟隨瀏覽器寬高，目的是不覆蓋body元素

css部分  

#box{
				justify-content: center;
				align-items: center;
				position: absolute;
				display: none;
				top:0px;
				left: 0;
				z-index: 15;
			}
			#box span{
				position: absolute;
				top:110px;
				right:22px;
				color: white;
				font-size: 30px;
				
			}

　　html部分

	<div id="box">
		<span id="close">關閉</span>
	</div>
<div id="imgbox">
<img src="img/leaveform.png" id="theimg" style="width=200px,height="200px"/>
<div>

　　js 部分生成自適應盒子 圖片元素填入盒子，點擊關閉隱藏並還原圖片

	var theimg=document.getElementById('theimg');
        theimg.ontouchstart=function(){
  	        var winHeight=window.innerHeight;
		var winWidth=window.innerWidth;		
        	var BoxObj=document.getElementById('box');   //獲取盒子對象 	
        	BoxObj.style.width=winWidth+'px';  //生成寬度
        	BoxObj.style.height=winHeight+'px';//生成高度
                BoxObj.style.backgroundColor='#929292'//添加背景色
                BoxObj.style.display='flex' //顯示並彈性佈局
                this.style.width=(BoxObj.offsetWidth-100)+'px'; //設置當前圖片寬度
                this.style.height=(BoxObj.offsetHeight-400)+'px';//設置當前圖片高度
        	$('#box').append(this) //填入元素
        	}
/*關閉燈箱*/
	     $('#close').click(function(){
	     	$('#box').hide()
	     	theimg.style.width=269+'px'; //還原
	     	theimg.style.height=240+'px';
	        $("#imgbox").append(theimg);
	     })
	

　　若是多張圖片可用for迴圈遍歷元素自行改造