Javascript 如何使用API中的数据在一个页面上打开多个模态

我目前有一个从GithubAPI获取公共事件数据的网页。对于每个数据，我都会在其中生成一个按钮来显示页面上的信息，并生成一个div来显示更多的信息作为模式。默认情况下，我隐藏了模态。我试图让它的地方，每次我按下按钮，相应的模式将出现。我已经尝试过研究这个问题，但我发现的方法与我的代码不兼容，我也不知道为什么。我猜这是因为我的元素是生成的，而不是在HTML文件中硬编码的？我对JavaScript还是新手，所以我真的想先坚持基本的，如果可能的话，用vanillaJS完成这项工作

我的代码：

函数loadEvents（）
{
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，'https://api.github.com/events",对),；
xhr.onload=函数（）
{
如果（this.status==200）
{
var response=JSON.parse（this.responseText）；
var输出=“”；
var modalResult=''；
用于（var i响应）
{
输出+=
//我将使用事件的id添加到数据模式的名称中，以便稍后将其与模式的id进行匹配
'' +
“
”+
“
用户名：”+response[i].actor.login+“
”+
“
事件类型：”+响应[i]。类型+“
”+
“
Repo:”+response[i].Repo.name+”
'+
“
”+
'' +
“”+//模式的id应与按钮属性数据模式匹配
'' +
'' +
“×；”+
'' +
''+响应[i].actor.login+''+
''+//modalHeader
'' +
“
”+
“
事件类型：”+响应[i]。类型+“
”+
“
Repo:”+response[i].Repo.name+”
'+
“
”+
''+//modalBody
'' +
'' +
''+//modalFooter
''+//modalContent
''//modalBox
;
}
document.getElementById（'bodyContainer'）。innerHTML=输出；
}
}
xhr.send（）；
}
函数刷新（）
{
位置。重新加载（true）；
}
//下面是我的代码，我尝试将模态“连接”到其相应的按钮
//选择事件的所有按钮
var modalBtn=document.querySelectorAll（'.pubEvents'）；
if（modalBtn）//如果modalBtn存在
{
//对于每个按钮，创建一个“onclick”事件
modalBtn.forEach（函数（btn）{
btn.onclick=函数（）
{
//获取按钮的数据模态属性，以“比较/匹配”模态的id元素
var modalID=btn.getAttribute（'data-modal'）；
document.getElementById（modalID.style.display=“block”；
}
});
}

正文
{
字体系列：Arial、Helvetica、无衬线字体；
保证金：0；
填充：0；
}
#导航栏
{
浮动：左；
高度：120px；
宽度：100%；
左侧填充：20px；
右边填充：20px；
背景色：#4AAAA5；
颜色：35404F；
}
#纳瓦尔里酒店
{
列表样式类型：无；
显示：内联块；
左侧填充：15px；
右侧填充：15px；
字体大小：20px；
}
#navbar ul li a
{
文字装饰：无；
}
#导航栏ul li a：悬停
{
颜色：#A3D39C；
光标：指针；
}
.选定
{
边框：2个实心#A3D39C；
}
.青春期
{
背景色：##F0；
边框：2px实心#4AAAA5；
边界半径：10px；
颜色：35404F；
宽度：100%；
字体大小：20px；
边缘顶部：20px；
文本对齐：左对齐；
}
李国宝
{
列表样式类型：无；
}
#集装箱
{
左边距：15px；
右边距：15px；
}
.悬停
{
背景色：#A3D39C；
光标：指针；
}
.bgmodel
{
显示：无；
位置：固定；
z指数：1；
左：0；
排名：0；
身高：100%；
宽度：100%；
溢出：自动；
背景色：rgba（0,0,0,0.8）；
游标：默认值；
}
.modalContent
{
背景色：#F4；
颜色：35404F；
利润率：10%自动；
宽度：50%；
//身高：25%；
}
#莫代尔内容
{
列表样式类型：无；
线高：1.6；
}
.modalHeader h2
{
字体大小：30px；
保证金：0；
}
莫达尔赫德先生
{
背景：#4AAAA5；
填充：15px；
高度：100px；
颜色：35404F；
}
莫达博迪先生
{
字体大小：20px；
填充：10px 20px；
}
莫达弗特先生
{
背景：#4AAAA5；
填充：10px；
文本对齐：居中；
}
莫达尔福特先生h2
{
字体大小：25px；
}
莫达尔福特先生
{
颜色：35404F；
文字装饰：无；
}
莫达尔弗特a：悬停
{
颜色：#7CC5；
光标：指针；
}
阿凡达
{
浮动：左；
右边距：20px；
}
.关闭
{
浮动：对；
字体大小：30px；
}
.closeBtn:悬停
{
颜色：#7CC5；
光标：指针；
}
#刷新
{
位置：固定；
底部：20px；
右：20px；
边界半径：10%；
背景色：#7cc5；
边框：2px实心詌35404F；
字体大小：25px；
颜色：35404F；
}
#刷新BTN：悬停
{
背景色：#A3D39C；
光标：指针；
}

Github仪表板
Github仪表板

公共活动
个人事件

↻<刷新
具有相同ID的多个元素是无效的HTML。你可能想解决这个问题。你的具体意思是什么？因为如果你说的是这一行：
''，那么id实际上是唯一的。我已使用公共事件id附加到模式的末尾。所以每个模式的id是：modal#（#是公共事件id的任意数字）啊好的。让我试试。