javascript - javascript 在一种条件下工作

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

}