Javascript 带有关闭按钮的简单图形弹出窗口

我需要编码一个图像，显示为一个弹出窗口，选择关闭按钮。我已经有了按钮样式，我只需要你帮助我如何将其编码在一起？你有什么建议吗？

我用纯js为你创建了一个简单的脚本。如果你觉得这有用的话。选择我的答案并给出+1

document.querySelectorAll（'.popup img img'）.forEach（single=>{
single.addEventListener（'click'，（e）=>{
设img=e.target；
img.classList.add（'popped'）；
let back=document.createElement（'div'）；
back.classList.add（'img-popup'）；
let close=document.createElement（'span'）；
close.classList.add（'close'）；
返回。追加子对象（关闭）；
document.body.appendChild（后面）；
back.addEventListener（'click'，（e）=>{
back.classList.add（'closed'）；
img.classList.remove（'popped'）；
setTimeout（函数（）{
document.querySelector（'.img popup'）.remove（）；
},500)
})
})
})

.img弹出窗口{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,95）；
变换：比例（1）；
过渡：放松；
}
.img-popup.closed{
变换：比例（0）；
}
.img弹出窗口。关闭{
位置：绝对位置；
排名：0；
右：0；
宽度：40px；
高度：40px；
光标：指针；
}
.img popup.close:before，.img popup.close:before{content:''；宽度：24px；高度：2px；背景：#fff；位置：绝对；顶部：0；左侧：0；}
.img弹出窗口。关闭：之前{
变换：旋转（45度）；
变换原点：左；
顶部：13px；
左：13px；
}
.img弹出窗口。关闭：之后{
变换：旋转（-45度）；
变换原点：右；
顶部：13px；
右：10px；
左：首字母；
}
img.popped{
位置：固定；
最高：50%；
左：50%；
最大高度：85vh；
最大宽度：85vw；
转换：翻译（-50%，-50%）；
过渡：放松；
z指数：1；
}

Plz添加一些代码您的要求很简单，但您没有添加任何代码。检查我的答案。