点击放大图片预览

创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖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) //填入元素　　　

　　　　　　　　　　　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循环遍历元素自行改造