window.open() method, you can determine what the window looks like (i.e. size, whether it has scrollbars, status bars etc).
Here is the basic script for generating a popup window:
This code is best placed inside a function (see below). But first things first. Here's an explanation of the above code.
window.open() method takes three arguments: the URL of the new page, the name of the window, and the attributes of the window. The attributes are optional and should be quite self explanatory in the above example. You can change these to see how it affects the popup window.
Basic Function for Popup Windows
You can put the above code into a function, then call the function, passing the URL as a parameter, whenever you want to open a popup window.
Doing this allows you to cut down on the amount of code you use when using popups.
Here's a working example.
The above script creates a function that accepts a parameter called "url". You can now call the function in your HTML as follows.
Here, we create a normal HTML link, but we also add the
this.href to refer to the HTML link (saves us typing it out twice). This piece is the "url" parameter that we're passing to the function.
return false bit ensures our base page doesn't actually go to that address - only the popup window.
So, putting the two together, our code should work like this:
You can make your function even more portable by using the script below.
A Better Script
This script is more versatile than the above script. This is because the function accepts parameters for more of the popup's properties (ie. height, width, position, name). This means you won't need to create a new function every time you want a different sized popup, a popup with a different name, or a popup in a different position.
Automatically Center your Popup
So, if you need the popup centered in the middle of the users' screen, use the following code:
Close the Popup Window
close() method to close the popup window.
For example, to create a hyperlink that closes the window, you could do this:
For more information, see Close Popup Window.