Popup Functions

Home

I hate popups. I REALLY hate popups. But sometimes a client insists. So here are some handy functions that will allow you to annoy your visitors to your heart's content:

Custom Sized Popup Windows

Keep Popup On Top

Separate Popup Windows

Closing a Popup From a Link

Custom Size Popup Windows:

In the HEAD or External JS file:

function cPop(url, wide, high)
  {window.open(url,"popup",'width=' + wide + ',height=' + high);
}

In the body:

<a href="javascript:cPop('page.html',300,500)">Click for popup window</a>

Here 300 and 500 are the width and height parameters. You can vary them for each popup link you want to create. Replace page.html with the actual name of the URL that you want to load in the popup window.

Top

Keep Popup On Top

When you have an ordinary popup, visitors can unknowingly bury it beneath the main window. Then, if they click on a second popup, and that document loads in the buried window -- they don't see it, even though it is there. To keep a popup window on top of the windows stack, in the code for the HTML page that loads in the popup, use this code in the body tag:

<body onBlur=self.focus()>

Top

Separate Popup Windows

Sometimes you want a brand new window for every popup, instead of loading a new document into the old window. To do this, we need to have a unique name for the popup window itself, not just a unique document to load into it.

In the HEAD or external JS file:

function cPop(url, windowname, wide, high)
  {window.open(url,windowname,'width=' + wide + ',height=' + high);
}

In the body, the link to generate the the popup window will now pass four parameters, like this:

<a href="javascript:cPop('page.html','win001',300,500)">Click for popup window</a>

Here, win001 is the name of this particular window. For the next link to launch a popup, you would use win002 (or any set of unique names you want). This way, each HTML document also gets a unique window.

IMPORTANT: If you use this method, several different popups can be open at one time. DO NOT USE THE CODE THAT KEEPS ONE WINDOW ON TOP OF THE STACK! You will create an infinite loop as two windows both fight to stay on top. That's a recipe for crashing a browser.

Top

Closing a Popup From a Link

You can offer a link to your visitors that will close the popup. Sometimes it's more elegant to do this, instead of requiring visitors to click on the "X".

Here's the code:

<a href="javascript:self.close()">Click Here to Close the Window</a>

If the popup contains an enlargement of a graphic, you can link that entire graphic so that a click anywhere in the window will close it.

If you include the self.close() method in a page that was not opened by javascript, then an alert box will be displayed, asking for the user's permission to close the window.

In the HEAD or External JS file:

function cPop(url, wide, high)
  {window.open(url,"popup",'width=' + wide + ',height=' + high);
}

In the body:

<a href="javascript:cPop('page.html',300,500)">Click for popup window</a>

Unfortunately Netscape and IE use differently named parameters for window positioning, so you have to include both sets. Also, the results may be inconsistent from version to version. That being said, here's what you need. Change the function declaration in the HEAD or external js file to this:

function cPop(url, www, hhh) { window.open(url,"popup",'width=' + www + ',height=' + hhh + ',left=50,top=50,screenX=50,screenY=50'); }

No changes are needed in the body link.

Top