This is a series of demonstrations illustrating how to create popup windows using JavaScript, HTML, and Flash/ActionScript. An alternate option using HTML layers follows last.

In html you can specify a new window with the target attribute: <a href="http://jimmont.com" target="myWindow"> test it

You can also add click event handlers to links: <a href="http://jimmont.com" target="myWindow" onclick="return false;"> test it This link won't do anything because of the 'return false' (that is all the return false does: cancel what the link normally does).

With javascript you can open a new window using 'window.open'. You can set this up in a <script> tag or directly in the attribute value: <a href="http://jimmont.com" target="myWindow" onclick="window.open(this.href); return false;"> test it

You get more flexibility if you put the function in the page and just refer to the function that is in a script tag: <a href="http://jimmont.com" target="myWindow" onclick="popup(this.href, this.target); return false;"> test it

On many sites you will see the href has 'javascript:...' or '#' and then onclick (eg nytimes.com slideshows). This is bad form in that your visitors cannot perform other link-related tasks on the link (like right-click to add a bookmark, open it in a tab, copy the link to share with someone, etc). If I visit the link without javascript it will simply fail. Keeping the real link in the href keeps these options open while still allowing scripted windows with this style: <a href="http://jimmont.com" target="myWindow" onclick="popup(this.href, this.target); return false;">

The popup script in the source of this page allows 3 arguments (in this order): the url to visit, a name for the window (equating to the html target), and options for the window-appearance: <a href="http://jimmont.com" target="myWindow" onclick="popup(this.href, this.target, 'toolbar=1, location=1, top=200, status=1, height=100, width=100, left=400'); return false;"> In each of these examples I use the keyword 'this' followed by the name of the attribute I want. This is a generic way for the onclick attribute to refer to the thing it is part of, in this case it is the link it is attached to. This way the href and target only need to be typed one time. The third argument are the details for the window that will be opened and can be computed based on the screen and window size. View the source for a sample of how I make some of the popups 1/3 of the width of the screen width. You can also compute the position of the window based on the width and available screen size to do something like centering the popup window on-screen.

Taking things a step further you can lower the maintenance associated with maintaining many popup windows by placing the popup-window javascript in an external file and (separately) scripting the attachment of the onclick attribute instead of typing it into the html. Your html is cleaner, never needs updating (at least for the purposes of the popup), and making changes to your site is possible by just updating the single script that is linked into the page (<script src="..." ...).

All of the following links use this last approach. In this case I have a script on the page that uses the window.onload event to look at all links on the page. View the source for details on how I used the class of the links to assign custom popup-styles for each group of links, and a final default for the rest. You can build on this approach to get a low overhead, low maintenance and highly customizable solution for popup windows on your site. These links are grouped to target one of 3 different windows:
sans sans sans sans special special diff diff

In Flash you can open popups by calling javascript urls with getUrl or ExternalInterface. Basically you just send the same javascript you would use in a normal html link href (eg href="javascript:alert(123)" ) from a button or movieclip. This sample actionscript could be assigned to a button or movieclip to use the popup function at it is for the links on this page (ie I could put a flash movie in this page with these actions in the swf and it would open a new window): on (release) { getURL("javascript:popup('http://jimmont.com/resrc/?popupflash_button')"); } my_mc.onPress = function(){ getURL("javascript:popup('http://jimmont.com/resrc/?popupflash_mc','flashPopup','width=300,height=100')"); } Once you have the javascript link working all of the details related to using the popup function work in the same way as they would with any link on this page. Here is a sample (flash file available too):

When the Flash plugin is not available this text is visible in its place.

For content that requires extensive javascripting it may be worth considering using HTML layers instead of a popup window. Layers can be scripted or simply styled with CSS to give a highly controlled window-like (or not) presentation that more tightly integrates into the page. There are many resources for building this sort of thing: Thickbox is oneclick to visit the Thickbox samples.

For more help with web publishing I can be reached via the following contact link.