Pop-Up windows have received a bad rap over the years. So much so, in fact, that ISP's, Anti-Virus and Anti-Spyware providers, and even the browsers themselves all offer users options to completely disable or to some extent control these pesky annoyances. But the truth is that pop-ups, if used correctly, can be very helpful and a great time saver for folks using your site. For example, let's say you have a map of a region with points of interest on your site. Folks can click on various points to learn more about each location. Now you can certainly navigate them away from the map to a special page that offers the detailed info for each location. But a more elegant solution would be to pop-up a little window showing the user the info they want to see. This way, they can close the window when they are done and continue browsing the map without having to navigate back to it and find their place again. Basically, pop-ups can help users get more info without losing their place and wasting time & clicks on unnecessary navigation.

window.open method

The window.open method is the Javascript function that launches a new window. Its basic syntax is as follows:

The windowURL is the path to the file you wish to display in the browser. It can be a relative path to a local file or a universal path to files on other servers. The open function expects a string for this value so if you're not using a variable name, you should enclose the path in quotes. You'll see this in the examples below.

The windowName is name you wish to use for your window. This is the name you can use to refer to the new window if you decide to contol/do things to it from the parent (main) window.

The windowAttributes are optional. The table below lists the attributes you can use here as well as their data type and default value if not declared explicitly. Click on the attribute title to see it in action.

Window Attribute	Description	Data Type	Default Value
directories	The browser directory buttons	Boolean	1
location	The Address field where you you can type in URLs	Boolean	1
menu	The browser menu bar	Boolean	1
resizable	Enable or Disable resizing of window	Boolean	1
scrollbars	Show or Hide scrollbars	Boolean	1
status	The status bar at the bottom of the window	Boolean	1
toolbar	The browser toolbar	Boolean	1
height	Window Height	integer	N/A
width	Window Width	integer	N/A
top	Y coordinate of top of window	integer	N/A
left	X coordinate of left side of window	integer	N/A

Now let's look at a real example. Here's the simplified code for launching the MAXO Radio window from the site menu above. I have removed some size related code to avoid confusion:

Triggering the Launch Code

Sometimes we want pop-ups to open when the user clicks on something (such as the attribute examples above). Other times, we want pop-ups to open up automatically when the parent window opens (these are usually the annoying ones people try to block). Let's take a look at both examples below:

Via Link

The "return(false);" portion of the code is in there to ensure the "href" portion of the tag doesn't result in navigation away from the parent window. You can also embed this as the last line of the "LaunchRadio" function as well.

Automatic (On Page Load)

That's pretty much all. Remember, a lot of people completely disable pop-ups so make sure you always have an elegant work-around for such situations.