Javascript modal將不會關閉，當點擊模態外

所以我是新來的JavaScript，我試圖設置一個網站，將包含我的導航模式。我希望模式在用戶點擊外部時關閉，這很容易，並且大量教程向我展示了不同的方法，但所有這些方法都是錯誤的或者不起作用。作爲參考，這裏是我的html，因爲它代表：Javascript modal將不會關閉，當點擊模態外

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Joe's Cars</title> 
     <link rel="stylesheet" type="text/css" href="style.css" > 
     <script src="https://use.fontawesome.com/d862ed6876.js"></script> 
     <link href="https://fonts.googleapis.com/css?family=Lora|Raleway|Source+Sans+Pro" rel="stylesheet"> 

    </head> 
    <body> 
     <header> 
      <button id="openNav"><i class="fa fa-bars" aria-hidden="true"></i></button> 
     </header> 

     <div class="navModal" id="navModal"> 
      <p>Navigation</p> 
      <button id="closeNav">close</button> 
     </div> 

     <script src="nav.js"></script> 
    </body> 
</html>

的JavaScript如下：

var modal = document.getElementById('navModal'); 
var openBtn = document.getElementById('openNav'); 
var closeBtn = document.getElementById('closeNav'); 

function openNav() { 
    modal.style.display = "block"; 
} 

function closeNav() { 
    modal.style.display = "none"; 
} 

function outsideClick(e) { 
    console.log('outside click called'); 
    if(e.target == modal){ 
     console.log('if statement executed'); 
     modal.style.display = 'none'; 
    } 
} 


openBtn.addEventListener('click', openNav); 
closeBtn.addEventListener('click', closeNav); 
window.addEventListener('click', outsideClick);

當我點擊導航欄之外，在窗口中點擊被稱爲和控制檯日誌之「外部點擊呼叫'，但if語句不執行。這可能是明顯的，但我從來沒有使用JavaScript事件處理程序和谷歌搜索提出的東西是超出我能理解的方式。

感謝所有

來源

2017-09-27 nomicron

看起來像是在這裏工作https://jsfiddle.net/c3vgLm5n/ –

在'outsideClick'中檢查'e.target ===模態'，但是當你點擊除模態之外的任何東西時，它會被執行。 – DarthJDG

@PaulFitzgerald似乎並沒有爲我工作，當我點擊外部的模態..只是當我點擊按鈕..也許這是我的瀏覽器 – nomicron

你不應該做if(e.target == modal){但if(e.target !== modal){。

你也應該改變openNav到：

function openNav(e) { 
    e.stopPropagation(); 
    modal.style.display = "block"; 
}

否則它會打開，當你點擊打開按鈕關閉模式。

來源

2017-09-27 10:20:31 Bartheleway

Javascript modal將不會關閉，當點擊模態外

回答

相關問題