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

}