How do I close a just opened window with JQuery by click?

Question

I can now open a picture in the original size in a new pop-up window, but I want to be able to close it by clicking it. This is how I open it:

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');
};

with this click event to activate the function:

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

This part worked perfect. But now I'm trying to close the window by clicking anywhere on the window. This is a variantion of the things I tried:

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

Which gave me the error: Uncaught ReferenceError: image is not defined

Now this last bit is something I really don't know how to do, I've looked around and tried some variations but I can't seem to get it right so that's why I called in your help: How can I close this opened window by clicking it?

Answer 1

Could be done like this instead:

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');
};

This limits the scope of the image variable to the function itself (demo, see console for error).

So, perhaps, you need to do:

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');
};