Javascript 使用相同的脚本打开modals

好的，我正在为一本杂志设计一个网站，下面的功能是打开一个模式，用户可以在其中查看所选作品。我遇到了一些问题，因为我想在同一个文件中多次使用此脚本。我觉得有一个简单的答案，因为我尝试过重命名变量之类的东西，但没有成功。很明显，c+p'd不可能一次又一次地工作，所以我只是在寻找一种分别适应它的方法。谢谢

HTML是一种基本的模式表单，下面有相应的变量，但我在将其放在这里时遇到了一些问题，因此这里有一个屏幕截图：

下面是脚本

function = modal(); {
    // Split Ends 
    // 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";
    }
}
} 

function=modal（）；{
//分叉
//获取模态
var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
} 

将类添加到要打开模式的所有按钮。 然后将单击事件处理程序添加到所有按钮

<button type="button" class="modal-button" ....

// Get the buttons that opens the modal
var btns = document.getElementsByClass("modal-button");

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

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

---

我想你需要的是模态函数的参数。模态（'modalID'，'btnId'）{…那么当你说var btn=document.getElementById（btnId）时，模态函数可以用于任何模态元素和按钮组合。所以在上面的代码中，我会为每个我想打开的按钮添加一类模态按钮？