在 $('html'）.click(） 之外单击时关闭图像;与打开的图像冲突

Close image when clicked on outside $('html').click(); conflict with open image?

本文关键字：图像 冲突 html click 单击      更新时间：2023-09-26

>我使用了一个简单的 css 和 js 来在单击图像时使用弹出图像显示图像，并在顶部关闭按钮以关闭图像。openimage 和 closeimage 都是 js 函数我已经实现为
打开图像功能为 

function imgv(x,y,img)
{
     document.getElementById('imgv_i2').src = img;
     document.getElementById('imgv_i2').style.width = x;
     document.getElementById('imgv_i2').style.height = y;
     document.getElementById('imgv_i2').width = x;
     document.getElementById('imgv_i2').height = y;
    imgToMiddle('imgv_i2');
    document.getElementById('imgv_i2').style.display = 'block';
}

关闭图像为 

function closeimgv()
{
    document.getElementById('imgv_i2').style.display = 'none';
    document.getElementById('imgv_close').style.display = 'none';
}

事件为 

<a href="javascript:void(0);"  onclick="imgv(101,101,'image url');"><img src="image src"></a>

现在为了在外面单击时关闭图像，我已经使用了这些像

$('#imgv_i2').click(function(event){
    event.stopPropagation();
});
$('html').click(function() {
if(document.getElementById('imgv_i2').style.display == 'block') {
            closeimgv();
    }
});

现在发生的情况是，当单击打开图像时，关闭图像功能也触发了如何使$('html').click();在打开图像功能触发后绑定并在关闭图像功能后取消绑定功能。谢谢。

尝试

$(document).click(function(ev) {
    //avoid clicks on image itself
    if($(ev.originalTarget).is("whatever triggers image opening")) {return;} 
    if(document.getElementById('imgv_i2').style.display == 'block') {
            closeimgv();
    }
});

我建议您使用jquery插件进行厚框或弹出窗口，因为它们非常简单且易于实现和自定义。有很多开源插件可以尝试一下，它们确实提供了您要求的自定义类型！

相关文章：