Question

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

但是，目前，关闭模式的唯一方法是使用＆＃39; X＆＃39;右上角的按钮

我想要的是通过点击图像的任何位置来关闭模态。即在图像周围的黑色背景上

我附上了一个小提琴，作为我的图片库目前的样子

非常感谢任何帮助，谢谢！

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

嗨试试吧。希望它对你有帮助.....

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

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

            });

});

JS fiddle

JavaScript - 模态 - 通过单击图像外的任何位置来关闭图像

2 个答案: