Javascript 我需要在一个网页中创建多个模式

我需要在一个HTML页面中创建多个模式，我可以创建一个工作正常的模式，但是当我创建另一个模式时，它就不工作了

      <!-- The Modal -->
      <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
          <div class="modal-header">
          <span class="close">&times;</span>
            <h3>Edit Intro</h3>
            <h2></h2>
          </div>
          <div class="modal-body">
           <center><br> School/Collage<br><input type="text" name="" style="width:100%"><br><br>
            Degree<br><input type="text" name="" style="width:100%"><br><br>
            Field of study<br><input type="text" name="" style="width:100%"><br><br>
          Start Date<input type="date" name="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; End Date<input type="date" name=""><br><br>
          grade<br><input type="text" name="" style="width:100%"><br><br>
           Descrption<br><textarea cols="30%" rows="4%"></textarea>
          </div></center>

              <a href=""><button class="modalsave">Save</button></a>
              <a href=""><button class="modalcencel">Cencel</button></a>

        </div>

      </div>

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

&时代；
编辑简介

学校/学院
学位
研究领域



开始日期结束日期


等级



描述

//获取模态
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=“无”；
}
}

---

这一模式有效，但当我在同一页面上为多个模式使用代码时，最上面的模式有效，但后面的模式无效。

模式字面上的意思是这样一个元素，它会阻止用户访问UI的其余部分，直到用户完成交互并关闭它。因此，一次只有一个活动模态（顶部模态）是正常的

所以我想你真正想问的是-为什么你的代码一次不显示多个弹出窗口。原因是该代码不是泛型的，并且引用特定的DOM元素（

#myModal

，其所有内容作为弹出包装，

#myBtn

作为弹出的触发器），并且只有

.close

元素是泛型的（因此具有

.close

类的任何DOM元素都可以充当关闭控件）. 但同样，您将单击处理程序附加到第一个找到的

。仅关闭
元素。因此，它只显示一个弹出窗口，因为页面上只有一个弹出窗口

您需要概括该代码。
请看一下此演示。这是一个简单、可访问的系统，可以在同一页面上使用多个模态


无依赖项
使用按钮上的
aria控件
属性，该属性指向每个模式的
id

有关
aria控件的更多信息，请访问：

aria controls=[IDLIST]用于将控件与
它控制的区域。区域的标识与区域中的id一样
div和多个区域可以使用
空格，例如aria controls=“myRegionID1 myRegionsID2”


const buttons=document.querySelectorAll（“[aria控件”）；
const modalButtons=document.querySelectorAll（'.modal button'）；
const modals=document.queryselectoral（'.modal'）；
函数hideModals（）{
forEach（modal=>modal.style.display='none'）；
}
函数showModal（modalId）{
document.getElementById（modalId.style.display='block'；
}
函数handleButtonClick（）{
const modalId=this.getAttribute（'aria-controls'）；
hideModals（）；
showModal（modalId）；
}
按钮。forEach（按钮=>{
按钮。addEventListener（'click'，handleButtonClick）；
});
modalButtons.forEach（按钮=>{
按钮。addEventListener（'单击'，隐藏数据）；
});
//当用户在模式内容之外单击时隐藏模式
window.onclick=event=>{
if（event.target.classList.contains（'modal'））{
hideModals（）；
}
}
.modal{
显示：无；
位置：固定；
排名：0；
右：0；
底部：0；
左：0；
}
.模态内容{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：计算（100vh-1米）；
宽度：计算（100vw-1米）；
弯曲方向：立柱；
背景色：rgba（0,0,0,8）；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.modal>*{
颜色：白色；
}

你好，我是莫代尔1

接近
你好，我是模态2

接近
开放式模式1
打开模式2