Creating a pop-up window

Pop-up windows are mostly an annoyance, especially when automated and when they
remove browser controls. However, they are occasionally useful, such as for providing a
user with brief access to terms and conditions without interrupting a checkout process.
Some portfolio sites also use pop-up windows to display larger versions of images
(although we’ll later see a better method of creating an online gallery).
Should you require a pop-up window of your very own, the JavaScript is simple:
function newWindow()
{
window.open("location.html");
}
And this HTML calls the script using the onclick attribute:
<a href="location.html" onclick="newWindow(); return false;">Open a
å new window!</a>
Note how the href attribute still has a value, which caters to users with JavaScript disabled
(loading the document into the current window). The return false part of the onclick
value ensures the href value is ignored for browsers with JavaScript activated (otherwise
both the original and pop-up window would display with the new web page).
Creating a system to open windows with varied URLs requires only slight changes to both
script and HTML. The script changes to this:
function newWindow(webURL)
{
window.open(webURL);
}

The HTML changes to this:
<a href="location-one.html" onclick="newWindow('location-one.html');
å return false;">Open location one in a new window!</a>
<a href="location-two.html" onclick="newWindow('location-two.html');
å return false;">Open location two in a new window!</a>
Note how the target location is now within the single quotes of the onclick value. This
could be any file name, and the link type can be absolute, relative, or root-relative. To provide
a warning when a pop-up is opened (as recommended by WCAG—Web Content
Accessibility Guidelines), you can add a single line to the JavaScript:
function newWindow(webURL)
{
alert("You are about to open a new window.");
window.open(webURL);
}
It’s also possible to control the settings of a pop-up window. To do so, the script needs to
be amended as follows:
function newWindow(webURL)
{
alert("You are about to open a new window.");
var newWin = window.open(webURL,"new_window",
å"toolbar,location,directories,
åstatus,menubar,scrollbars,resizable,
åcopyhistory,width=300,height=300");
newWin.focus();
}
The values within the set of quotes that begin "toolbar, location... enable you to set
the pop-up window’s dimensions and appearance. There must be no whitespace in the
features list, and it must all be on one line. Most of the items are self-explanatory, but
some that may not be are location, which defines whether the browser’s address bar is
visible, and directories, which defines whether secondary toolbars such as the links bar
are visible. Note that if you specify one or more of these, any you don’t specify will be
turned off—therefore, you must specify all the features you want in the pop-up window.
Now, a word of warning: as alluded to earlier, having control of the web browser wrenched
away from them makes some users want to kick a puppy. Therefore:
Never use JavaScript to pop up windows without the user knowing that it’s going to
happen. (The integrated alert mentioned earlier is one thing, but you should always
also mention next to the relevant link that a pop-up will be created if the link is
clicked.)

*Never create a site that automatically pops up a window and removes the window
controls.

*Never use a pop-up window unless it’s absolutely necessary.

Some designers might argue about aesthetics and for the clean nature of a browser window
at full-screen, devoid of its controls, but there are no real reasons for using pop-up
windows in this manner other than that; there are, however, counterarguments, such as
taking control from the user, the general annoyance factor, a full-screen window suddenly
covering everything else, and so on. Ultimately, pop-ups and nonrequested new windows
are a very bad thing, so avoid using them.