如何修复非'；不响应它'；什么是javascript？

函数出现（）{
document.querySelector（“.modal bg”）.style.display='flex'；
document.querySelector（“.modal-bg2”）.style.display='flex'；
}
document.querySelector（“.close”）.addEventListener（“单击”，函数（）{
document.querySelector（“.modal bg”）.style.display='none'；
document.querySelector（“.modal-bg2”）.style.display='none'；
});
正文{
背景图像：url（“https://i.ibb.co/KqdJ9Dm/218752.jpg");
背景尺寸：封面；
}
#足球俱乐部{
颜色：白色；
字体大小：粗体；
高度：50px；
宽度：90px；
背景图像：线性梯度（#DA4453，#89216B）；
位置：相对位置；
左：605px；
顶部：65px；
}
.modal bg、.modal-bg2{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
证明内容：中心；
对齐项目：居中；
显示：无；
}
.modal内容，.modal-content2{
宽度：500px；
高度：300px；
边界半径：10px；
位置：相对位置；
背景色：白色；
顶部：25px；
}
.modal-bg2{
左：600px；
}
.模态背景{
右：315px；
}
#答复{
宽度：140px；
高度：60px；
位置：相对位置；
左：185px；
边界顶部：无；
左边界：无；
边界权：无；
底部边框：2件纯黑；
大纲：无；
字体系列：“Oswald”，无衬线；
}
.结束{
位置：绝对位置；
排名：0；
右：14px；
字体大小：32px；
变换：旋转（45度）；
}
#{
位置：绝对位置；
顶部：200px；
左：225px；
背景图像：线性梯度（#DA4453，#89216B）；
颜色：白色；
字体大小：粗体；
}
#头衔{
底部边框：2件纯黑；
大纲：无；
边界顶部：无；
左边界：无；
边界权：无；
字体大小：25px；
字体大小：粗体；
位置：相对位置；
左：65px；
顶部：95px；
}
：-webkit输入占位符{
文本对齐：居中；
}
钮扣{
光标：指针；
}

闪存卡专业版
Flash Card Pro存在元素重叠问题。无法单击
.close
元素，因为它上面还有另一个元素（
.modal-bg2
）

您已将close元素设置为绝对位置。给它一个z索引值，以确保它位于顶部

.close {
    . . .
    z-index: 10;
}

我不想用这句无关的话来夸大答案，所以我选择把它作为一条评论发布。在这一点上，我可以给出一些建议，但对我来说最突出的是“关闭”应该是一个按钮，而不是div。或者OP也可以添加一个按钮角色，tabindex=0。modal-bg2与按钮重叠，建议重新调整css