Craig Francis


JS Pop Up Windows

Before reading how I create pop-up window links, I suggest you read my article on why you should not use pop-up links.

A basic solution

If you want a quick and dirty way to create pop-up windows, then I suggest you use the following:

<a href="file.html"
onclick="window.open(this.href); return false;">Link</a>

A better solution

However, as professional developers, we should by using Unobtrusive JavaScript, as this will allow us to remove the fairly repetitive JavaScript code out of the HTML source, and into its own JavaScript file, which can then be used on any page of the website.

The first step is to download my script.js and popup.js files and include them in the pages <head>, like so:

<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="popup.js"></script>

Then create a standard link and add either the 'popup' class for a simple new window, or use the 'popup780x400' class to specify the dimensions for a pop-up window without toolbars.

<a href="file.html" class="popup">Link</a>
<a href="file.html" class="popup780x400">Link</a>

Dependancy note

You don't really need the full scripts.js file, as we only use the addLoadEvent function. But it does contain other functions which are handy to have lying around.

Any feedback would be greatly appreciated. If you would like to use this code, please read the licence it is released under.