Javascript 我如何修改这个JS以允许多个模态？

对不起，我应该说得更清楚些。我不想同时显示两个模态。我有两个按钮，每个打开一个不同的模式

我正在使用我在Codepen找到的一些JS来创建一个模态对话框。只要我使用1个模态，一切都像一个符咒。但是，我想在同一页上使用两种不同的模态。我将如何修改代码以允许多个模态？我尝试了从修改代码到复制所有内容以及粘贴/重命名它的所有方法。我所做的一切似乎都打破了模式。理想情况下，我想要这样的东西：

<div class="modal-overlay1">
  <div class="modal-window1">
    <h1>Welcome to the modal window!</h1>
    <p>This is a pop up that may contain a form or other info</p>
    <button class="close-button">Close popup</button>
</div>

  <div class="modal-overlay2">
  <div class="modal-window2">
    <h1>test</h1>
    <p>test</p>
    <button class="close-button">Close popup</button>
</div>

欢迎来到模态窗口！
这是一个可能包含表单或其他信息的弹出窗口

关闭弹出窗口
测试
试验

关闭弹出窗口

代码笔链接：

---

您可以这样做：

<div class="modal-overlay1">
  <div class="modal-window1">
    <h1>Welcome to the modal window!</h1>
    <p>This is a pop up that may contain a form or other info</p>
    <button class="close-button">Close popup</button>
</div>

  <div class="modal-overlay2">
  <div class="modal-window2">
    <h1>test</h1>
    <p>test</p>
    <button class="close-button">Close popup</button>
</div>

js:

html:

单击打开模态1
单击打开模态2
欢迎来到模态窗口！
这是一个可能包含表单或其他信息的弹出窗口

关闭弹出窗口
欢迎来到模态窗口2！
第二模式

关闭弹出窗口

您是否试图同时显示多个模态？如果是这样，您可能会误解

modal

的含义。您只需要一个modal。根据要显示的内容更改模式的内容。

<div class="container">
  <p id="ml1" class="modal-link">Click to open modal1</p>
  <p id="ml2" class="modal-link">Click to open modal2</p>
</div>

<div id="m1" class="modal-overlay">
  <div id="mw1" class="modal-window">
    <h1>Welcome to the modal window!</h1>
    <p>This is a pop up that may contain a form or other info</p>
    <button class="close-button">Close popup</button>
  </div>
</div>

<div id="m2" class="modal-overlay">
  <div id="mw2" class="modal-window">
    <h1>Welcome to the modal window 2!</h1>
    <p>Modal number two</p>
    <button class="close-button">Close popup</button>
  </div>
</div>