JavaScript Popup Windows

You can use JavaScript to create popup windows. Popup windows are different to simply opening a new browser window.

If you only want to open a new browser window you can add the target="_blank" attribute within your <a> tag (see Opening a new window in HTML). Popup windows however, are more powerful. Using JavaScript's window.open() method, you can determine what the window looks like (i.e. size, whether it has scrollbars, status bars etc).

Basic JavaScript Popup Script

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.

The 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 JavaScript:

The above script creates a function that accepts a parameter called "url". You can now call the function in your HTML as follows.

The HTML:

Here, we create a normal HTML link, but we also add the onclick event handler to trigger our JavaScript function. In the script, we use 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.

The return false bit ensures our base page doesn't actually go to that address - only the popup window.

Example

So, putting the two together, our code should work like this:

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.

The above code creates the following link:

Automatically Center your Popup

This function centers the popup in the middle of the users' screen. The JavaScript code will detect the screen size (each user could have a different screen size), then position the popup window in the center.

So, if you need the popup centered in the middle of the users' screen, use the following code:

The above code creates the following link: