Javascript 打开和关闭灯箱

我做了一个灯箱，但我有一个小问题。 我可以在单击X按钮时关闭灯箱，但我也希望在框外单击时关闭灯箱

第二个问题是，当我打开灯箱，点击另一个。第一个不关，然后，我打开了两个灯箱

有什么想法吗，伙计们？ 谢谢大家：）

$（文档）.ready（函数（）{
$（“显示面板”）。单击（函数（）{
$（“#灯箱，#灯箱面板”）.fadeIn（300）；
});
$（“关闭面板”）。单击（函数（）{
$（“#灯箱，#灯箱面板”）。淡出（300）；
})
});
.full\u section\u internal{z-index:auto；}
.link{宽度：100%高度：自动；位置：绝对；光标：指针；}
.link:hover{文本装饰：下划线；}
#链接文本{宽度：100%；位置：绝对；底部：0px；字体大小：20px；行高：22px；字母间距：0px；}
.状态{位置：绝对；顶部：0；左侧：-100vw；}
.status:选中~.content{-webkit转换：无；转换：无；}
.状态：选中~.背景{底部：0；不透明度：1；z索引：1；过渡：0.3s不透明度缓进缓出；}
.lightbox{位置：固定；右侧：0；左侧：0；高度：0；填充：0；z索引：100；顶部：20%；}
.lightbox.content{显示：flex；flex方向：列；溢出：隐藏；位置：相对；z索引：2；最大宽度：550px；最大高度：80vh；边距：20px自动；填充：25px；背景：#fff；-webkit变换：translateY（-200%）；变换：translateY（-200%）；过渡：0.3s-webkit变换易入易出；过渡：0.3s变换易入易出；过渡：0.3s变换易入易出，0.3s-webkit变换易入易出；边框：3px实心；}
.lightbox.header lightbox{display:flex；flex wrap:nowrap；对齐内容：间距；对齐项目：居中；填充底部：15px；}
.lightbox.header lightbox h2{边距：0；字体大小：28px；行高：30px；}
.按钮{字体大小：30px；}
.按钮：悬停{光标：指针；}
.text lightbox{字体系列：无衬线；字体大小：16px；行高：20px；颜色：#000；}

奥娜兄弟
标题
X
Lorem ipsum dolor sit amet

请提供代码示例或JS FIDDLE，因为您的代码不起作用。至少在我的电脑上，Chrome69（64位）。请再检查一遍。