创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖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部分

     
		
      关闭	
     
 
     
       
      
     

　　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) //填入元素　　　

　　　　　　　　　　　document.body.addEventListener('touchmove',bodyScroll,false);//禁止页面滑动　　　　　　　　　　$('body').css({'position':'fixed',"width":"100%"});

　　

}/*关闭灯箱*/	     $('#close').click(function(){	     	$('#box').hide()	     	theimg.style.width=269+'px'; //还原	     	theimg.style.height=240+'px';	        $("#imgbox").append(theimg);

　　　　　　　　　　

document.body.removeEventListener('touchmove',bodyScroll,false); 　　　　　　　　　　$("body").css({"position":"initial","height":"auto"});

　　

})

　　若是多张图片可用for循环遍历元素自行改造