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将不会关闭，当点击模态外

回答

相关问题