Javascript java脚本在一个条件下工作

我正在开发一个基于html的应用程序，当我触发一个按钮时，会打开两个弹出窗口

这是第一个弹出窗口的代码：

<div id="id01" class="modal" style="padding-top:150px;">

    <form class="modal-content animate" action="/action_page.php" style="width:80%; height:70%;     border-radius: 25px;" >


        <div class="container" style=" padding-left:13%; border-radius: 25px; padding-top:10%; ">
            <input type="text" name="name" placeholder="Your Full Name "  style=" padding-top:15px; color:black; width:90%; text-align:center; border-left:none; border-right:none; border-top:none; border-bottom:solid;  border-width:0.1px; border-color:#b3b3b3; "/><br />

            <input  type="password" name="name" placeholder="Your passwored "  style=" padding-top:10%; color:black; width:90%; text-align:center; border-left:none; border-right:none; border-top:none; border-bottom:solid;  border-width:0.1px; border-color:#b3b3b3; "/><br />

            <br>



            <select  style="border-style: none;  background-position: center;     background-size: 150% 150%; background-repeat: no-repeat; background-image:url(file:///android_asset/images/loginbtn1.png); text-align:center; width:90%; height:30px;   border-radius: 25px; "><p>    </p>
                <option style="display: none;" ></option>

                <option value="student">Saab</option>
                <option value="instructor">Saab</option>

            </select>

            <img src="file:///android_asset/images/loginbtn2.png"  style=" padding-top:10%; margin:auto; text-align:center; width:90%; height:auto;  ">

         </div>


    </form>
</div>


<script>
// Get the modal
var modal1 = document.getElementById('id01');

window.onclick = function(event) {
    if (event.target == modal1) {
modal1.style.display = "none";

   }




}




</script>

萨博
萨博
//获取模态
var modal1=document.getElementById（'id01'）；
window.onclick=函数（事件）{
如果（event.target==modal1）{
modal1.style.display=“无”；
}
}

这是第二个弹出窗口的代码：

<div id="id02" class="modal" style="padding-top:150px;" >

    <form class="modal-content animate" action="/action_page.php" style="width:80%; height:70%;     border-radius: 25px;" >



     </form>
</div>




<script>
// Get the modal
var modal2 = document.getElementById('id02');

window.onclick = function(events) {
    if (events.target == modal2) {
modal2.style.display = "none";

   }


}





 </script>

//获取模态
var modal2=document.getElementById（'id02'）；
window.onclick=函数（事件）{
if（events.target==modal2）{
modal2.style.display=“无”；
}
}

我使用下面的代码，是从一个按钮触发的每个弹出窗口都是打开罚款

我的问题是，当我尝试在主体外单击时，第一个代码工作正常，它会关闭，但第二个代码不会关闭，它会粘在页面上，不会关闭

---

提前感谢您的帮助。

您正在重写处理程序函数。尝试使用一个函数

if (event.target == modal1) {

}else if(event.target == modal2){

}

---

您正在重写处理程序函数。尝试使用一个函数

if (event.target == modal1) {

}else if(event.target == modal2){

}

---

我正在使用以下代码

-此语句后没有代码？我是否遗漏了一些内容>是，但它只是添加了一个onclick（）来打开弹出窗口，但工作正常问题是关闭它们

我使用的是以下代码

-此语句后没有代码？我错过了什么吗>是的，但它只是添加了一个onclick（）来打开弹出窗口，但它工作正常问题是关闭它们