How to make pop-up windows?

Pop-up windows, or popups, are windows that vary in size, but usually do not cover the whole screen. Some popups open on top of the current browser window, thus popping up, while others appear underneath the browser window (popunders).

I will show here how to implement an image gallery using pop-up windows generated with JavaScript commands. JavaScript has commands to open and close windows. This commands are called 'methods,' following the object orientation of the language. The opening of a window is equivalent to the creation of an object, in this case, a window object. There is always at least one window open, the window containing the running script. This window may create other windows using the method 'open.' Each window can close itself.

The 'open' method

The syntax of this method is as follows:

[windowVar = ][window].open("url", "windowName",
["windowFeatures"])

'url' is the URL of the file that will be loaded into the window.

'windowName' is a name that can be used, for example, as the value of the 'target' attribute in an <A> tag.

'windowFeatures' is a string containing several pairs of attributes and values that configure the appearance of the window. For example, if I want to display a window that is 200 pixels wide and 200 pixels tall, and that is located at coordinates 0,0 in the screen, I may specify:

"screenX=0, screenY=0, width=200, height=200"

'windowVar' is a reference to the newly created window object, and can be used to modify the object's properties.

The 'close' method

While a window can create another window, it cannot close it. A window can only close itself. What this means is that the 'close' method to be used must belong to the window we are wanting to close. If I want to close the window where the script is, I can use any of these statements:

window.close()
self.close()

If I want to close a window that is not the current window (i.e., the window where the script is), I must use the window variable that I assigned when creating the window. If the variable is 'msgWindow', the statement will be:

msgWindow.close()

An example of pop-up windows

I will present here a simple example of the use of the JavaScript commands that allow the management of pop-up windows. This example must not be considered as a full application, but only as a hint on how such an application can be done. Let us suppose we have two pictures, one of a boat, and one of a girl. I will set up two buttons: one button displays the picture of the boat, "boat.jpg", and the other the picture of the girl, "girl.jpg". Both images are displayed in the same pop-up window, whose size is adapted according to the image.

First, in the HEAD section I declare a variable 'window3' that will hold the reference to the pop-up window. Next, I define two functions: one to close the window, and one to change its image. These functions are coded rather generally, as they ought to be in case we intend them to be reusable modules.

<script language="JavaScript1.2">
var window3;
function windowCloser( windowRef ) {
if ( windowRef == undefined ) {
	alert("There is no window")
}
else {
	if ( windowRef.closed ) {
		alert("Window was already closed")
	}
	else {
		windowRef.close()
	}
}
}
function changeImage( windowRef, imageURL, width, height ) {
if ( windowRef == undefined ) {
	alert("There is no window")
}
else {
	if ( !windowRef.closed ) {
		windowRef.close()
	}
	features = "width=" + width + ",height=" + height +
	",screenX=100,screenY=100";
	window3 = open( imageURL, "popup", features );
	window3.focus()
}
}
</script>

The 'windowCloser' function is required because I propose to start with no image displayed. Otherwise, it can be spared. In the BODY section, I place before anything a script that will create the window and immediately close it. If one wants to have everything in the HEAD section, this script can be made a function and called from an 'onload' event handler. Then the buttons are made which will show the images.

<script>
window3=window.open("boat.jpg", "popup", "screenX=100, screenY=100,
width=150, height=150");
windowCloser(window3);
</script>
<FORM NAME="form1">
<P>
<INPUT TYPE="button" VALUE="Boat" onClick="changeImage(window3,
'boat.jpg', 150, 150)">
<P>
<INPUT TYPE="button" VALUE="Girl" onClick="changeImage(window3,
'girl.jpg', 100, 130)">
<P>
</FORM>

Previous | Contents | Next

	| HOME | FEEDBACK | BOOKMARK | Build your Website © 1999-2008 Hector Castro -- All rights reserved