Javascript 使用几种不同的模态

我随后用javascript创建了一个好看的CSS模式。在我的页面上，我总共需要8种不同的模态。是否可以使用相同的ID等？我知道我必须修复Javascript中的一些东西，但我不知道如何修复。我现在看到的唯一方法是使用唯一的ID，复制Javascript并将变量更改为ID

但一定有更好的办法，不是吗？这样我就可以做到：

<a id="myBtn" class="modalBtn">Button one</a>
<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Button one header</h2>
        </div>
        <div class="modal-body">
            <p>Button one text</p>
        </div>
    </div>
</div>

<a id="myBtn" class="modalBtn">Button two</a>
<div id="myModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Button two header</h2>
        </div>
        <div class="modal-body">
            <p>Button two text</p>
        </div>
    </div>
</div>

按钮一
&时代；
按钮一标题
按钮一文本

按钮二
&时代；
按钮二标题
按钮二文本

并正确地显示它们。而不是这样做：

<a id="myBtn1" class="modalBtn">Button one</a>
<div id="myModal1" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Button one header</h2>
        </div>
        <div class="modal-body">
            <p>Button one text</p>
        </div>
    </div>
</div>

<a id="myBtn2" class="modalBtn">Button two</a>
<div id="myModal2" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>Button two header</h2>
        </div>
        <div class="modal-body">
            <p>Button two text</p>
        </div>
    </div>
</div>

按钮一
&时代；
按钮一标题
按钮一文本

按钮二
&时代；
按钮二标题
按钮二文本

如果我按照第二个例子来做；然后我必须复制Javascript，使每个按钮和每个模式有8个变量。必须有一种更简单、更干净的方法来做到这一点

---

有人知道我如何做到这一点吗？

基本上，Id必须是唯一的。 如果您担心javascript，那么可以将id作为参数来封装函数。 即-

---

您可以在这里看到一个正在工作的JSFIDLE（带有一些附加组件）-

在您的示例中，内容或代码量没有区别。你只更新了ID吗？@Armin确切地说，第二个例子中ID的需求发生了变化，没有发布javascript，因为它在我看来是不言自明的。javascript已经在我链接的指南上完成了。虽然这是一个解释得很好的答案，但我不确定这是我想要的。我只想要基本的情态动词，里面只有文本。这不就是图像之类的吗？@Condolent这就是你链接到的功能。如果你想使用一些不太复杂的东西，同样的原则仍然适用-你可以封装和移动所需的参数作为变量。该死，我太笨了。。对不起，我链接错了指南。。更新OP@Condolent不用担心：）用新功能更新了我的答案代码正常工作，我通过

按钮一来调用它没错，对吗？不过有一个小问题，span.onclick函数仅在默认模式下工作。（myModal）而不是myModal1。而且，我似乎必须双击链接才能看到它们
function ModalFunction(modalId, btnId){
  // Get the modal
  var modal = document.getElementById(modalId);

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

  // 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";
      }
  }
}

ModalFunction("myModal1", "myBtn1");
ModalFunction("myModal2", "myBtn2");