JavaScript - 模态 - 通过单击图像外部的任意位置关闭图像答案

【问题标题】：JavaScript - Modal - Close image by clicking anywhere outside the imageJavaScript - 模态 - 通过单击图像外部的任意位置关闭图像
【发布时间】：2022-01-08 04:48:58
【问题描述】：

我有一个响应式图片库，您可以在其中单击图片，它会以模式弹出，显示图片的完整视图。

然而，目前，关闭模式的唯一方法是使用右上角的“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;
}
}

【问题讨论】：

标签： javascript html image modal-dialog

【解决方案1】：

你很亲密。

您需要向 modal 添加一个事件监听器，以便在单击时将其 display 属性更新为 none

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

JSFIDDLE

【讨论】：

【解决方案2】：

您好，试试这个。希望对您有所帮助.....

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

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

            });

});

JS fiddle

【讨论】：

您好，这行得通，谢谢！快速提问，你有没有机会知道我如何平滑图像的关闭？目前，它关闭图像太快，因此看起来很粗糙。你知道我怎样才能减慢它的速度，让它更顺畅地关闭模式吗？
为了平滑我们必须添加一些动画类或js预定义的动画函数。如果你找到了答案。请投票给我。

【解决方案3】：

var ignoreClickOnImg = document.getElementById('gImg');
document.addEventListener('click', function(e) {
    var isClick = ignoreClickOnImg.contains(e.target);
    if (!isClick) {
         modal.display = "none";   // or write what you want
    }
});

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。