图像覆盖单击关闭

Question

我按照这个fiddle链接添加了一个覆盖以使图像更大。但在它中，你必须再次单击放大的图像才能关闭覆盖。我想知道我是否可以反转它，并且只能点击图片？

我假设它在这里的jquery中：

$(".brick img").click(function() {
$("#imgBig").attr("src", $(this).prop('src'));
$("#overlay").show('slow');
$("#overlayContent").show('slow');
});
$("#imgBig").click(function() {
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});

Answer 1

根据我的理解，如果用户点击背景覆盖而不是图像，你希望它删除图像，所以试试这个：

$(".brick img").click(function(){                                             $("#imgBig").attr("src",$(this).prop('src'));
$("#overlay").show('slow');
$("#overlayContent").show('slow');
});
$("#overlay").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
$("#overlayContent").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});

由于#overlay被#overlayContent覆盖，我添加了第二个函数，如果点击整个背景区域，它也会做同样的事情，它会删除图像，而不必点击图像本身。