JavaScript - Modal - 通过点击图像外部的任何地方来关闭图像

我有一个响应式图像库，您可以点击图像，它会弹出一个模式，显示图像的完整视图。JavaScript - Modal - 通过点击图像外部的任何地方来关闭图像

然而，目前，关闭模式的唯一方法是使用在右上角的“X”按钮

我想什么，是能够通过单击关闭任何地方关闭的模态图片。即：在图像

周围的黑色背景。我已小提琴作为我的图片库就是一个例子现在喜欢

任何帮助将不胜感激，谢谢！

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

来源

2016-06-20 Usman Zafar

你接近。

您需要添加一个事件侦听器，模态，使上点击，它更新它的display属性none

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

JSFIDDLE

来源

2016-06-20 15:41:39 brk

嗨尝试this.Hope它会帮助你的。 ....

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

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

      }); 

});

JS fiddle

来源

2016-06-20 15:53:19 iyyappan

嗨，这工作，谢谢你！快速的问题，任何你知道我能如何平滑图像关闭的机会？目前，它太快关闭图像，结果看起来相当粗糙。你知道我怎样才能减慢速度，所以它更顺利地关闭模态？ –

对于平滑，我们必须添加一些动画类或js预定义的动画函数。如果您找到答案，请投票给我。 – iyyappan

JavaScript - Modal - 通过点击图像外部的任何地方来关闭图像

回答

相关问题