我如何使用这个javascript在8个不同ID的不同模态上工作，而不需要对每个按钮重复相同的代码？

要实现在8个不同ID的不同模态上使用相同的JavaScript代码，可以使用以下方法：

使用类选择器或属性选择器来选择所有的模态框按钮，而不是使用ID选择器。这样可以将相同的代码应用于多个按钮，而不需要重复编写代码。
在JavaScript中，使用循环遍历所有的模态框按钮，并为每个按钮添加相同的事件处理程序。可以使用querySelectorAll方法选择所有的按钮，并使用forEach方法遍历它们。
在事件处理程序中，可以使用this关键字来引用当前被点击的按钮。通过this可以获取按钮的相关信息，如ID、属性等。
如果需要在事件处理程序中执行特定于每个模态框的操作，可以为每个按钮添加自定义属性，如data-target或data-modal-id，并在事件处理程序中使用这些属性来识别和操作相应的模态框。

下面是一个示例代码：

HTML部分：

<button class="modal-btn" data-target="modal1">打开模态框1</button>
<button class="modal-btn" data-target="modal2">打开模态框2</button>
<!-- 其他模态框按钮... -->

<div id="modal1" class="modal">模态框1内容</div>
<div id="modal2" class="modal">模态框2内容</div>
<!-- 其他模态框... -->

JavaScript部分：

// 选择所有的模态框按钮
var modalBtns = document.querySelectorAll('.modal-btn');

// 为每个按钮添加事件处理程序
modalBtns.forEach(function(btn) {
  btn.addEventListener('click', function() {
    // 获取目标模态框的ID
    var targetModalId = this.getAttribute('data-target');
    
    // 根据ID获取目标模态框元素
    var targetModal = document.getElementById(targetModalId);
    
    // 执行特定于每个模态框的操作
    // ...
    
    // 显示目标模态框
    targetModal.style.display = 'block';
  });
});

在上述示例中，通过使用类选择器.modal-btn选择所有的模态框按钮，并使用querySelectorAll方法获取它们。然后，使用forEach方法遍历所有的按钮，并为每个按钮添加点击事件处理程序。在事件处理程序中，使用this关键字引用当前被点击的按钮，并通过getAttribute方法获取data-target属性的值，即目标模态框的ID。最后，根据ID获取目标模态框元素，并执行特定于每个模态框的操作，然后显示目标模态框。

这种方法可以避免重复编写相同的代码，并且可以在多个不同ID的模态框上使用相同的JavaScript代码。