如何通过单击关闭带有 JQuery 的刚刚打开的窗口？

Question

我现在可以在新的弹出窗口中以原始大小打开图片，但我希望能够通过单击将其关闭。我是这样打开的：

function bigger(service)    {       
    var image = window.open(service, 'image', 'width=510,height=470,menubar=0,scrollbars=0,titlebar=0,left=200,toolbar=0,top=200,resizable=0');
};

用这个点击事件激活功能：

$("#services div img").click(function() {
    bigger($(this).attr('src'));
});

这部分工作完美。但现在我试图通过单击窗口上的任意位置来关闭窗口。这是我尝试过的事情的变体：

$(image).click(function()   {
    $(image).close();
});

这给了我错误：Uncaught ReferenceError: image is not defined

现在这最后一点是我真的不知道该怎么做，我环顾四周并尝试了一些变化，但我似乎无法做到正确，所以这就是我求助于你的原因：我该怎么做点击关闭这个打开的窗口？

Answer 1

可以这样做：

DEMO jsFiddle

function bigger(service) {
    var image = window.open("", 'image', 'width=510,height=470,menubar=0,scrollbars=0,titlebar=0,left=200,toolbar=0,top=200,resizable=0');
    $(image.document.body).append('<img style="width:100%" src="' + service + '">').on('click', function(){
        image.close();
    });
}

Answer 2

function bigger(service)    {       
    var image = window.open(service, 'image', 'width=510,height=470,menubar=0,scrollbars=0,titlebar=0,left=200,toolbar=0,top=200,resizable=0');
};

这将image 变量的范围限制为函数本身（demo，请参阅控制台以了解错误）。

所以，也许，你需要这样做：

var image;
function bigger(service)    {       
    image = window.open(service, 'image', 'width=510,height=470,menubar=0,scrollbars=0,titlebar=0,left=200,toolbar=0,top=200,resizable=0');
};