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

你接近。

您需要添加一個事件偵聽器，模態，使上點擊，它更新它的display屬性none

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

JSFIDDLE

Answer 2

嗨嘗試this.Hope它會幫助你的。 ....

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

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

      }); 

}); 

JS fiddle