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:

CodeResult

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:

Copy to Clipboard
// Popup window function
	function basicPopup(url) {
popupWindow = window.open(url,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
	}

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:

Copy to Clipboard
<a href="http://www.quackit.com/common/link_builder.cfm" onclick="basicPopup(this.href);return false">Open a popup window</a>

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:

CodeResult

Open a popup window

But wait!

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.

CodeResult

Positioned Popup

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:

CodeResult

Centered Popup

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo
Webydo Banner Ad
Webydo Banner Ad