Javascript 通过单击背景区域关闭Lightbox窗口？

我开发了一个lightbox功能，我正在尝试通过单击显示图像后面的背景区域来关闭lightbox预览窗口（同时保持图像不受影响）

这里有一个演示片段。在右上角有一个按钮切换控件，可以关闭lightbox窗口，但是我也希望能够通过单击图像周围的背景区域来关闭窗口。有什么意见吗

更新：解决方案

多亏了你，这一切终于得以实现。在此处更新了我的原始代码片段：

var$scrollTop=0；
$（'.pic>img'）。单击（函数（）{
变量$body=$（'body'）；
$scrollTop=$（窗口）.scrollTop（）；
$body.css（'position'，'fixed'）；
$body.css（'top'，'-'+$scrollTop++'px'）；
$body.css（'background-position'，'0-'+$scrollTop+'px'）；
var srcToCopy=$（this.attr（'src'）；
$body.find（'.imgsrc'）.attr（'src'，srcToCopy）；
$body.addClass（'no-scroll'）；
$（“#视图”）.addClass（“目标”）；
});
$（'#customlightbox控件'）。在（'单击'，函数（）上）{
变量$body=$（'body'）；
$body.css（'位置'，''）；
$body.css（'background-position'，''）；
$scrollTop=$（窗口）.scrollTop（$scrollTop）；
$body.removeClass（'no-scroll'）；
$（“#视图”）.removeClass（“目标”）；
});
$（'.customlightbox imgwrap'）。在（'click'，函数（e）上{
if（！$（e.target）.hasClass（'imgsrc'））{
变量$body=$（'body'）；
$body.css（'位置'，''）；
$body.css（'background-position'，''）；
$scrollTop=$（窗口）.scrollTop（$scrollTop）；
$body.removeClass（'no-scroll'）；
$（“#视图”）.removeClass（“目标”）；
} 
});
正文{
背景色：#58d68d；
保证金：0；
填充：0；
边界：0；
身高：100%；
宽度：100%；
}
无滚动体{
溢出：隐藏；
高度：自动；
宽度：100%；
}
图，
#imgsrc{
显示：内联块；
光标：指针；
}
img{
宽度：150像素
}
a{
显示：内联块；
线高：0；
}
.集装箱{
文本对齐：居中；
显示：块；
宽度：100%；
线高：0；
}
.定制灯箱{
最高：0%；
底部：0%；
框大小：边框框；
位置：固定；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
z指数：-5；
不透明度：0；
}
.customlightbox imgwrap{
宽度：100%；
身高：100%；
填充：20px；
框大小：边框框；
位置：相对位置；
文本对齐：居中；
}
.定制灯箱img{
宽度：自动；
保证金：自动；
最大宽度：100%；
最大高度：100%；
不透明度：0；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
#自定义lightbox控件{
光标：指针；
框大小：边框框；
位置：固定；
高度：50px；
宽度：50px；
顶部：-50px；
右：-3px；
z指数：5；
左边框：2倍纯白；
底部边框：2件纯白；
不透明度：.7；
}
#关闭灯箱{
显示：块；
位置：绝对位置；
溢出：隐藏；
高度：30px；
宽度：30px；
右：10px；
顶部：10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
#关闭customlightbox:之前{
内容：“；
显示：块；
位置：绝对位置；
高度：0px；
宽度：2倍；
左：14px；
排名：0；
背景：白色；
边界半径：2px；
}
#关闭customlightbox:之后{
内容：“；
显示：块；
位置：绝对位置；
宽度：0px；
高度：2倍；
顶部：14px；
左：0；
背景：白色；
边界半径：2px；
}
.customlightbox.target{
z指数：4；
不透明度：1；
显示：内联块；
}
.customlightbox.target img{
不透明度：1；
}
.customlightbox.target~#customlightbox控件{
顶部：-3px；
}
.customlightbox.target~#customlightbox控件#关闭customlightbox:after{
宽度：30px；
}
.customlightbox.target~#customlightbox控件#关闭customlightbox:before{
高度：30px；
}
.lb动画{
-webkit过渡：0.5s易入易出；
-moz转换：0.5s易入易出；
-ms转换：0.5s易进易出；
-o型过渡：0.5s缓进缓出；
过渡：0.5s缓进缓出；
}

通过单击背景隐藏灯箱
可以通过在以下代码中添加#视图

之前
之后

var$scrollTop=0；
$（'.pic>img'）。单击（函数（）{
变量$body=$（'body'）；
$scrollTop=$（窗口）.scrollTop（）；
$body.css（'position'，'fixed'）；
$body.css（'top'，'-'+$scrollTop++'px'）；
$body.css（'background-position'，'0-'+$scrollTop+'px'）；
var srcToCopy=$（this.attr（'src'）；
$body.find（'.imgsrc'）.attr（'src'，srcToCopy）；
$body.addClass（'no-scroll'）；
$（“#视图”）.addClass（“目标”）；
});
$（“#customlightbox控件，#视图”）。在（'单击'，函数（）上{
变量$body=$（'body'）；
$body.css（'位置'，''）；
$body.css（'background-position'，''）；
$scrollTop=$（窗口）.scrollTop（$scrollTop）；
$body.removeClass（'no-scroll'）；
$（“#视图”）.removeClass（“目标”）；
});
正文{
背景色：#58d68d；
保证金：0；
填充：0；
边界：0；
身高：100%；
宽度：100%；
}
无滚动体{
溢出：隐藏；
高度：自动；
宽度：100%；
}
图，
#imgsrc{
显示：内联块；
光标：指针；
}
img{
宽度：150像素
}
a{
显示：内联块；
线高：0；
}
.集装箱{
文本对齐：居中；
显示：块；
宽度：100%；
线高：0；
}
.定制灯箱{
最高：0%；
底部：0%；
框大小：边框框；
位置：固定；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
z指数：-5；
不透明度：0；
}
.customlightbox imgwrap{
宽度：100%；
身高：100%；
填充：20px；
框大小：边框框；
位置：相对位置；
文本对齐：居中；
}
.定制灯箱img{
宽度：自动；
保证金：自动；
最大宽度：100%；
最大高度：100%；
不透明度：0；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
#自定义lightbox控件{
光标：指针；
框大小：边框框；
位置：固定；
嗨
$('#customlightbox-controls').on('click', function()

$('#customlightbox-controls, #view').on('click', function()

$('.customlightbox-imgwrap').on('click', function(e) {
   if(!$(e.target).hasClass('imgsrc')){ // check if target is not the image displayed
     var $body = $('body');
     $body.css('position', '');
     $body.css('background-position', '');
     $scrollTop = $(window).scrollTop($scrollTop);
     $body.removeClass('no-scroll');
     $('#view').removeClass("target");
   } 
});