JavaScript - Modal - 画像の外側をクリックして画像を閉じる

Question

私は画像をクリックすることができる反応的な画像ギャラリーを持っており、画像の全体像を示すモーダルとしてポップアップ表示されます。

しかし、現在、モーダルを閉じるための唯一の方法は、私が望む何右上に

を「X」ボタンを使用している、オフ任意の場所をクリックしてモーダルを閉じることができるようにすることです画像。すなわち、画像

周りの黒い背景の上に、私は私のイメージギャラリーがすべてのヘルプは大幅に、おかげでいただければ幸いです

ように、現在あるものの例として、バイオリンを添付しました！

https://jsfiddle.net/eoansv83/2/

HTML：

<div class="responsive"> 
    <div class="gImg"> 
    <img src="test.jpg"> 
    <div class="desc">example 1</div> 
    </div> 
</div> 

<div class="responsive"> 
    <div class="gImg"> 
    <img src="test.jpg"> 
    <div class="desc">example 2</div> 
    </div> 
</div> 

はJavaScript：

// Get the modal 
var modal = document.getElementById('myModal'); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
modal.style.display = "none"; 
} 

// Get all images and insert the clicked image inside the modal 
// Get the content of the image description and insert it inside the modal image caption 
var images = document.getElementsByTagName('img'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
var i; 
for (i = 0; i < images.length; i++) { 
images[i].onclick = function() { 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    modalImg.alt = this.alt; 
    captionText.innerHTML = this.nextElementSibling.innerHTML; 
} 
} 

Answer 1

あなたが近くにあります。あなたはクリックで、それはnone

var modal = document.getElementById('myModal'); 
modal.addEventListener('click',function(){ 
this.style.display="none"; 
}) 

JSFIDDLE

Answer 2

にそれはdisplayプロパティのアップデートように、モーダルにするイベントリスナーを追加する必要が

こんにちは、それはあなたに役立つthis.Hopeをお試しください。 ....

$(document).ready(function(){ 
$('#img01').click(function(e){ 

       //e.preventDefault(); 
       $(this).show(); 
       e.stopPropagation(); 

      }); 

}); 

JS fiddle