How NOT to code a pop-up window

It’s a fairly common question “How do I do a pop-up window?”. Unfortunately, it is usually answered by script kiddies who assume everyone is using IE 9+ with scripting enabled. They only know that there is a problem when, if ever, anyone complains that their links are dead. Why? Because they have broken the basic HTML link mechanism.

How do they do it? The usual suggestions are:

<A HREF="JavaScript:popup('mypopupfile.html')"><IMG SRC="mybutton.gif" BORDER=0></A>

or

<A HREF="#" onClick="popup('mypopupfile.html')"><IMG SRC="mybutton.gif" BORDER=0></A>

(With a “popup” function in the page headers.) Both of these will fail completely when scripting is off.

How to control the window properties of a pop-up and maintain compatibility with users who have scripting off? Try the following:

<a href="page.html" target="newwindow" onclick="void( window.open('page.html','newwindow','height=x,width=y,scrollbars=yes') )"><img src="mybutton.gif" border="0"></a>

You can set whatever window open properties you like in the window.open command and the href is now valid, so it will work with scripting turned off.

Remember: Opening links in new windows is generally regarded as bad practice by accessibility guidelines and should be avoided unless there are valid reasons for using these techniques and the user is warned in advance.

Related Posts