点击放大图片预览

创造一个自适应的盒子，跟随浏览器宽高，目的是不覆盖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循环遍历元素自行改造

转载于:https://www.cnblogs.com/huazai1/p/11063100.html