Javascript 多模态不能正常工作

我很抱歉，如果这是回答之前，但我已经盯着这个代码几个小时，无法找出为什么它的行为方式是这样的

我有一个页面，上面有3个模式窗口，我正在使用javascript触发。现在只有一个模式窗口，它可以正常工作，但是我尝试添加两个窗口，第一个窗口的第一个链接触发第三个模式，然后关闭功能不再工作

这是我的密码：

CSS:

/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
.modal1{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
.modal2{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容/框*/
.模态内容{
背景色：#fefe；
保证金：15%自动；/*15%从顶部和居中*/
填充：20px；
边框：1px实心#888；
宽度：80%；/*可能更多或更少，具体取决于屏幕大小*/
}
/*关闭按钮*/
.结束{
颜色：#aaa；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：黑色；
文字装饰：无；
光标：指针；
}
/*模态头*/
.模态标题{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
/*模态体*/
.模态体{填充：2px 16px；}
/*模态页脚*/
.模态页脚{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：80%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}

HTML和Javascript：

<!-- Trigger/Open The Modal -->
<a href="#" id="myBtn">Open Modal 1</a>
<a href="#" id="myBtn1">Open Modal 2</a>
<a href="#" id="myBtn2">Open Modal 3</a>

<!-- modal 1 -->
<script type="text/javascript">
            function modalFun(){
                // 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() {
                    console.log(modal);
                    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";
                    }
                }

                     // Get the modal
                var modal = document.getElementById('myModal1');

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


                // 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() {
                    console.log(modal1);
                    modal1.style.display = "block";
                }

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() {
                    modal1.style.display = "none";
                }

                // When the user clicks anywhere outside of the modal, close it
                window.onclick = function(event) {
                    if (event.target == modal1) {
                        modal1.style.display = "none";
                    }
                }

                     // Get the modal
                var modal = document.getElementById('myModal2');

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


                // 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() {
                    console.log(modal2);
                    modal2.style.display = "block";
                }

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() {
                    modal2.style.display = "none";
                }

                // When the user clicks anywhere outside of the modal, close it
                window.onclick = function(event) {
                    if (event.target == modal2) {
                        modal2.style.display = "none";
                    }
                }
            }

            window.onload=modalFun;
       </script>

<!-- Modal 1 -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>

</div>

<!-- Modal 1 -->

<!-- Modal 2 -->

<!-- The Modal -->
<div id="myModal1" class="modal1">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header2</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>

</div>

<!-- Modal 2 -->

<!-- Modal 3 -->

<!-- The Modal -->
<div id="myModal2" class="modal2">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header3</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>

</div>

<!-- Modal 3 -->

函数modalFun（）{
//获取模态
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=“无”；
}
}
//获取模态
var modal=document.getElementById（'myModal1'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn1”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
console.log（modal1）；
modal1.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal1.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==modal1）{
modal1.style.display=“无”；
}
}
//获取模态
var modal=document.getElementById（'myModal2'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn2”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
console.log（modal2）；
modal2.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal2.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==modal2）{
modal2.style.display=“无”；
}
}
}
window.onload=modalFun；
?
<!-- Trigger/Open The Modal -->
<a href="#" id="myBtn">Open Modal 1</a>
<a href="#" id="myBtn1">Open Modal 2</a>
<a href="#" id="myBtn2">Open Modal 3</a>

<!-- modal 1 -->
<script type="text/javascript">
            function modalFun(){
                // 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() {
                    console.log(modal);
                    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";
                    }
                }

                     // Get the modal
                var modal = document.getElementById('myModal1');

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


                // 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() {
                    console.log(modal1);
                    modal1.style.display = "block";
                }

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() {
                    modal1.style.display = "none";
                }

                // When the user clicks anywhere outside of the modal, close it
                window.onclick = function(event) {
                    if (event.target == modal1) {
                        modal1.style.display = "none";
                    }
                }

                     // Get the modal
                var modal = document.getElementById('myModal2');

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


                // 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() {
                    console.log(modal2);
                    modal2.style.display = "block";
                }

                // When the user clicks on <span> (x), close the modal
                span.onclick = function() {
                    modal2.style.display = "none";
                }

                // When the user clicks anywhere outside of the modal, close it
                window.onclick = function(event) {
                    if (event.target == modal2) {
                        modal2.style.display = "none";
                    }
                }
            }

            window.onload=modalFun;
       </script>

<!-- Modal 1 -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>

</div>

<!-- Modal 1 -->

<!-- Modal 2 -->

<!-- The Modal -->
<div id="myModal1" class="modal1">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header2</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>

</div>

<!-- Modal 2 -->

<!-- Modal 3 -->

<!-- The Modal -->
<div id="myModal2" class="modal2">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header3</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>

</div>

<!-- Modal 3 -->

var span = modal.querySelector('.close');

span.addEventListener('click', function() {
  modal.style.display = 'none';
});

function initializeModal(modalID, buttonID) {
  // Get the modal element
  var modal = document.getElementById(modalID);

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

  // Get the <span> element that closes the modal
  var span = modal.querySelector('.close');

  // When the user clicks on the button, open the modal
  btn.addEventListener('click', function() {
    modal.style.display = "block";
  });

  // When the user clicks on <span> (x), close the modal
  span.addEventListener('click', function() {
    modal.style.display = "none";
  });

  // When the user clicks anywhere outside of the modal, close it
  window.addEventListener('click', function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  });
}

<div class="wrapper">
    <a class="btn btn-primary btn-sm" role='button'data-bs-toggle="modal" data-bs-target="#modal1">Modal 1</a>
    <a class="btn btn-primary btn-sm" role='button'data-bs-toggle="modal" data-bs-target="#modal2">Modal 2</a>
    <a class="btn btn-primary btn-sm" role='button'data-bs-toggle="modal" data-bs-target="#modal3">Modal 3</a>
</div>

<div class="modal fade" id="modal3" tabindex="-1" aria-hidden="true">
...
</div>
<div class="modal fade" id="modal2" tabindex="-1" aria-hidden="true">
...
</div>
<div class="modal fade" id="modal1" tabindex="-1" aria-hidden="true">
...
</div>