HTML
.picsejectBox {
display: none;
height: 100vh;
overflow: scroll;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
line-height: 100vh;
text-align: center;
}
.v-middle { position:relative; top:50%; transform:translateY(-50%); }
#overlay {
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
z-index: 99;
display: none;
top: 0;
left: 0;
}
.picsBox img{
max-width: 8rem;
}
<i οnclick="picseject(1);" class="picsBox"><img src="__TMPL_IMAGES__/pics01.jpg"></i><i οnclick="picseject(2);" class="picsBox"><img src="__TMPL_IMAGES__/pics02.jpg"></i>
<div οnclick="closepic();" id="overlay"></div> <!--<<图片弹出--> <div οnclick="closepic();" class="picsejectBox"><img id="imgsbox" class="img-responsive center-block v-middle" src=""></div> <!--图片弹出>>-->JS
<script> function picseject(id) { if(id==1){ $("#imgsbox").attr('src',"__TMPL_IMAGES__/pics01.jpg"); }else if(id==2){ $("#imgsbox").attr('src',"__TMPL_IMAGES__/pics02.jpg"); } $("#overlay").show(); $(".picsejectBox").show(); } function closepic() { $("#overlay").hide(); $(".picsejectBox").hide(); } </script>
缩略图版只需要把原图src作为id存入,将attr里的src重新拼接即可