當用戶在JavaScript中單擊外部時，可以使彈出框關閉

Question

我有問題，因爲我的網站上存在JS代碼問題。我在Js文件中創建了7個彈出窗口，並將該文件附加到我的index.php文件中。當我使用所有的人只有最後一個工作

的index.php（片段）

      <div id="popupBox_1"> 
          <div class="popupBoxWrapper"> 
           <div class="popupBoxContent"> 
            <h3>Popup 1</h3> 
            <p>Obecnie przeglądasz okienko 1</p> 
           </div> 
          </div> 
         </div> 

         <div id="popupBox_2"> 
          <div class="popupBoxWrapper"> 
           <div class="popupBoxContent"> 
            <h3>Popup 2</h3> 
            <p>Obecnie przeglądasz okienko 2</p> 
           </div> 
          </div> 
         </div> 

         <div id="popupBox_3"> 
          <div class="popupBoxWrapper"> 
           <div class="popupBoxContent"> 
            <h3>Popup 3</h3> 
            <p>Obecnie przeglądasz okienko 3</p> 
           </div> 
          </div> 
         </div> 

popup.js（片段）

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

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

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

我做了這些彈出窗口和它們能否正常使用但我在js中創建了這些函數，因爲我想在用戶單擊外部彈出窗口時關閉它們。它只是爲最後我定義的（我的意思是popupBox_3）工作，我想讓他們都工作！

我需要你的幫助！

Answer 1

您不能使用Node.onclick分配多個單擊事件處理程序，每次您都會覆蓋最後一個。您可能開關

window.addEventListener('click', function() { 
    if (event.target == popupBox_1) { 
     popupBox_1.style.display = "none"; 
    } 
}); 

window.addEventListener('click', function() { 
    if (event.target == popupBox_2) { 
     popupBox_2.style.display = "none"; 
    } 
}); 

...etc. 

但它將使很多更有意義，只是將所有三個條件成爲一個可點擊的處理程序：

window.onclick = function(event) { 
    if (event.target == popupBox_1) { 
     popupBox_1.style.display = "none"; 
    } 
    if (event.target == popupBox_2) { 
     popupBox_2.style.display = "none"; 
    } 
    if (event.target == popupBox_3) { 
     popupBox_3.style.display = "none"; 
    } 
}