Javascript 如何使多模式（使用纯css）成为目标唯一id？

我有多个具有不同库集的库，但问题是如何在事件中正确地使用现有代码

这是我目前在单模态上工作的js

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

下面是通过ID打开的html代码；我需要的是像data target=“model-01”这样的数据，然后是model-02，以便知道需要打开什么

&时代；
```

您可以向所有按钮添加相同的类“打开模式”和唯一的数据目标属性

<a id="myBtn" class="open-modal" data-target="myModal<?=$r['id'];?>" href="#">Button</a>

<span class="close" data-target="myModal<?=$r['id'];?>">&times;</span>

您可以向所有按钮添加相同的类“打开模式”和唯一的数据目标属性

<a id="myBtn" class="open-modal" data-target="myModal<?=$r['id'];?>" href="#">Button</a>

<span class="close" data-target="myModal<?=$r['id'];?>">&times;</span>

---

如果我只是用类更改id，这个答案对我没有帮助当我打开php foreach循环时这个问题开始``如果我只是用类更改id，这个答案对我没有帮助当我打开php foreach循环时这个问题开始``谢谢你，但这个解决方案对我不起作用我在模式中有五个不同的模板，每个按钮都需要正确定位模态这就是为什么我需要添加Gallery的id我编辑了答案，以显示如何使用此方法创建5个按钮和5个模态问题是按钮位于不同的文件中，然后模态我需要使用js或JQUERY进行操作我需要通过数据target id=“m-”或id=“myModal-”获取id关于模态id呢？谢谢，但这个解决方案对我不起作用。模态中有五个不同的模板，每个按钮都需要指向正确的模态。这就是为什么我需要添加Gallery的id。我编辑了答案，以说明如何使用此方法创建具有5个模态的5个按钮。问题是，按钮位于不同的文件中，然后是模态我需要使用js或JQUERI，我需要通过数据target id=“m-”或id=“myModal-”获取id，那么modal id呢？