John Bokma Intrusion
freelance Perl programmer

Pop-up windows

Don't annoy your visitors | 2 comments

Pop-up windows can be divided into two categories: the auto pop-up and the interactive pop-up. The former is notorious for its use of forcing onto visitors commercial messages, polls, and other messages. Pop-ups of this kind are either displayed when the page is visited or when the page is left (exit) beyond control of the user. Most exit pop-ups trigger new pop ups on closing so quite often it is a race between the visitor closing and those annoying windows opening. Due to the fact of major use for commercial purposes a lot of so-called "pop-up blocking programs" are in use today. Also the well known browser Mozilla and browsers based on Mozilla, like Firefox, have the option to block pop-ups. Most visitors not using blocking software are so used to closing auto pop-up windows that even a pop-up window containing for example a navigation menu (remote control) risks being closed before a good look has taken place.

Because pop-ups are often closed on first sight they sometimes pop-up behind (pop-under) the window containing the page that spawns them.

Interactive pop-ups are used for example to display larger versions of an image or help. However when a new window is required the abilities of the browser can be used. Sometimes visitors end up with an error because an URL of the form javascript:some_function() can't be handled by browsers. If a new window really is desired, remark this near the link or the button, especially when this is done using JavaScript.

Friendly JavaScript pop-up windows

When you decide to use pop-ups make sure that there is always an alternative available for people who have JavaScript disabled, block pop-ups, or use a browser with no JavaScript support. Those pop-ups are called friendly.

The following code shows the wrong way of creating a pop-up:

<a href="'file.html');">Click here
    to open pop-up</a>

You can turn the above bad code into a friendly pop-up by moving the JavaScript into the OnClick attribute:

<a href="file.html" onClick=";
    return false;">Click here to open pop-up</a>

If JavaScript is disabled the above link still works. Also since this.href is used, if the link is changed you only have to update the value of the href attribute.

Further reading

Please post a comment | read 2 comments, latest by John Bokma | RSS feed