Lock up your hindbrain, it's Andy's Bucket-o-Memes

Pop-Up Windows That Behave Themselves

Sometimes, you'll want to create a pop-up window - as a viewer pane perhaps, or with some supplementary detail. I occasionally use them here, for glossary items (though that needs re-writing).

Popups should be on top of the other windows. If you're creating one for a one-off, that's fine, but if you're using, say, a viewer, you'll want that viewer window to come to the top every time it's given new content - otherwise it'll do its thing behind the main window, and the user will never know.

On-top-ness is called "focus" in the windowing world. The current, on-top, active window "has focus" - you're looking at it. The others are out of focus.

Here's how to create a popup that has focus:

The link which you're using to launch the popup needs to include a JavaScript onClick event. This is entered as a parameter, just like the href and so on, so a link might be:

<a href="blah" title="blah" onClick="blah">

Here's what the onClick parameter should contain:


Let's go through the bits of this:

  • mywindow is the name of the popup window. This can be anything you like as long as it's not got spaces or weird characters and doesn't start with a non-letter. Traditionally, it's "viewer" or "glossary" or "popup" or something else really creative.

  • is a javascript method for opening windows.

  • URL is the URL of the contents of your popup.

  • parameters is the additional window-opening parameters you may need to control how that popup looks. For details on what parameters are allowed, do a websearch on "javascript".

  • mywindow.focus() is a javascript method for giving focus to a window - in this case, mywindow. If your window was called "fred" then this would read "fred.focus()", naturally.

What this onClick event does is two things: The first instruction (to the left of the semicolon) creates an object in the browser's memory called mywindow, and gives it the details of the newly-opened popup window. The second instruction gives that object focus, which brings it to the top of the window stack.