Java脚本有一个条件工作

Question

我工作的一个HTML基础应用程序，我有2个弹出窗口，当我触发一个按钮

这是第一个弹出的代码打开：

<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> 

这是用于第二弹出的代码：

<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> 

我使用下面的代码，其由按钮触发每个弹出的正在打开细

我的问题是，当我尝试在身体之外单击第一个代码工作正常，并将其关闭，但第二个没有关闭它坚持在页面上，事先未关闭

感谢您的帮助。

Answer 1

你重写你的处理函数。尝试使用一个函数

if (event.target == modal1) { 

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

}