jquery 点击图片弹出遮罩层查看大图

<div class="photobox">
  <ul>
     <li  data-date="'+data[i].id+'">
         <div class="imgbox">
             <img src="..."/>
         </div>
     </li>
     <li>......</li>
     <li>......</li>
  </ul>
</div>
//图片预览功能
$('.photobox').on('click','li .imgbox img',function(){
var sta = $(this).parents('li').attr('data-date');
 $.get(
 'http://...../get?access_token=...&img_id='+sta+'',function(data){
var imge = '<div class="fa" style="height:100%;width:100%;z-index:999999;background-color:rgba(70,70,70,.6);position:fixed;top:0">' +
'</div>';
var showImg = '<img class="show" style="position:fixed;top:0;left: 0;right:0;bottom:0;margin:auto;z-index:1000000;width: 40%;" src="' + data.images[0] + '" alt="please wait">';
 $('body').append(imge);
 $('.fa').append(showImg);
 $('.fa').append('<div id="left">&lt;</div><div id="right">&gt;</div>');
 $('#left,#right').css({
'font-size':'30px',
'color':'#FFF',
'position':'absolute',
'top':'50%',
'margin-top':'-20px',
'cursor':'pointer',
'z-index':10000001
 });
 $('#left').css('left','5px');
 $('#right').css('right','5px');
//追加点击消失图片
 $('.fa').append('<span id="none" style="font-size: 30px;z-index: 10000001;position: fixed;cursor: pointer;color: #ffffff;right: 10px">&times;</span>');
 $('.fa').append('<div id="ye" style="color:#FFFFFF;width: 100px;text-align: center;position: absolute;left: 50%;margin-left: -50px;z-index: 10000001;top:12px"><span>1</span>/<span>'+data.images.length+'</span></div>');
var i = 0; //声明初值
 //左右滑动切换图片
 $('#right').click(function(){
 i++;
if(i >= data.images.length){
 $('.fa').remove();
 }
 $('.fa img').attr('src',data.images[i]);
 $('.fa #ye span:first-child').text(i+1);
 });
 $('#left').click(function(){
 i--;
if(i<0){
 $('.fa').remove();
 }
 $('.fa img').attr('src',data.images[i]);
 $('.fa #ye span:first-child').text(i+1);
 });
//点击消失图片
 $('#none').click(function(){
 $('.fa').remove();
 });
 }
);
})