モーダルの外側をクリックしたときにJavascriptモーダルが閉じることはありません

私はjavascriptが新しく、Navを含むウェブサイトのモーダルを設定しようとしています。私は、ユーザーがそれを外に出すたびにモーダルを閉じることを望みます。これは簡単で十分です。チュートリアルではさまざまな方法を示していますが、それらのすべてがエラーであるか動作していません。次のようにモーダルの外側をクリックしたときにJavascriptモーダルが閉じることはありません

<!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>

ジャバスクリプトがある：私は、ナビゲーションバーの外側をクリックすると、ウィンドウのクリックが

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

と呼ばれ、コンソールログそれは、そのまま参考のためにここに私のhtmlです「クリックされたコールの外に」、if文は実行されません。これはおそらく何か明白ですが、JavaScriptのイベントハンドラを使用することは一度もありませんでした。Google検索では理解できるものを超えたものが出てきています。

おかげで、すべての

出典

2017-09-27 nomicron

ここでは動作しているようですhttps://jsfiddle.net/c3vgLm5n/ –

'outsideClick'では' e.target === modal'をチェックしますが、モーダル以外のものをクリックすると実行されます。 – 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モーダルが閉じることはありません

答えて

関連する問題