This article describes how to open a picture in a popup window and close it with a single mouse click.
To understand this script, you must be able to understand basic HTML tags like
a (anchor), and
In the example, we will implement the main script only once, and we can use it any time on this page. So the first thing we have to do is to copy the following
function OpenNewWindow(bigurl, width, height)
var newWindow = window.open("", "pictureViewer",
"location=no, directories=no, fullscreen=no, " +
"menubar=no, status=no, toolbar=no, width=" +
width + ", height=" + height + ", scrollbars=no");
newWindow.document.writeln("<body style='margin: 0 0 0 0;'>");
newWindow.document.writeln("<img src='" + bigurl +
"' alt='Click to close' id='bigImage'/>");
Of course, the script must be surrounded by
Let’s see how it works. The function has to be called with three parameters. The first one is the URL of the picture, what we would like to open, the second
and the third are the dimensions of the picture.
In the first row of the function, a new window will be opened, with the specified height and width parameters. The
window.open method also gets a name
pictureViewer”). If this parameter is not an empty string, all our pictures are opened in the same browser window that was opened first.
After opening a new window, the code will write a simple HTML page in it.
<body style='margin: 0 0 0 0;'>
<img src='xy.jpg' alt='Click to close' id='bigImage'/>
You can see that there is a small script in the anchor tag which can close the newly opened window. The name of the picture (xy.jpg) comes from the parameter value.
If you would like to use margins, you can alter the
style attribute of the
Calling the script
In the main page, you must put an anchor tag to surround that content, which has to open the new window. For example, if you want to display a picture in a detailed view, you can use this:
<a href="#" onclick="OpenNewWindow('images/bigpicture.jpg', 500, 500); return true;">
<img src="images/smallpicture.jpg" alt="Click..."/>
The big picture and the small picture image must exist at the specified position.
Internet Explorer usually prohibits script running from the local computer. So you should avoid testing the attached HTML code with Internet Explorer
from your local computer or you must always click on the “Allow blocked content” menu in the yellow bar.
The Hungarian version of this article is accessible here.