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 href tag. 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).

Create a JavaScript popup window

window.open('http://quackit.com/common/link_builder.cfm','popUpWindow','height=500,width=400,left=100,
top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,
location=no,directories=no, status=yes');
	

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.

Create a Popup Window Function

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.

Basic JavaScript popup window function

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

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

Call your popup window function

Example

The above function should work like this:

Important note: I have used line breaks in the above examples to improve readability. Your JavaScript arguments should not have line breaks, they should be a continuous string.