Doing JavaScript pop-up windows the right way

Some would argue there is no right way to do a JavaScript pop-up since it disrupts the natural flow and usability of the web. I would tend to agree, but like all things web, there are exceptions to this rule and it may not be your choice anyway. That said there definitely is a very wrong way to do a JavaScript pop-up, and unfortunately there are literally hundreds of tutorials showing you how to do it the wrong way and even more websites implementing it wrong.

Using only JavaScript is the wrong way to do a pop-up. It’s not because JavaScript may be disabled; by now many websites would be completely broken without JavaScript and the expectation is that JavaScript is enabled. The reason for not using only JavaScript is accessibility and search engine optimization. First, pure JavaScript pop-ups will annoy power users who like to middle click links. I’m a middle click fiend and can have anywhere from 10 to 20 tabs open at any given time and pure JavaScript pop-ups take this expected functionality away. You are also crippling many search engines and thus harming your SEO rankings.

The easy but wrong way to do a pop-up

function badPopup() {
	window.open("http://www.ianhoar.com/", "window", "height=300,width=300" );
}

<a onclick="badPopup()" href="#">Very bad pop-up</a>

The above function can also be done inline with an onclick too, but either way it’s not the right way to do a pop-up. You cannot middle click or right click it and search engines will have trouble following it.

Some better ways to do a pop-up

function goodPopup(url) {
window.open(url, '_blank', 'scrollbars,resizable,height=300,width=300');
return false;
}

<a onclick="return goodPopup(this.href)" href="http://www.ianhoar.com">Much better pop-up function</a>

The above function is a much better way to do a pop-up because you are passing the links href thus enabling the link to work without JavaScript. This means we can middle click it and right click it, access it with JavaScript disabled and search engines will have no problem following the link either.

If you need a quick and dirty one off pop-up you can use inline JavaScript.

<a href="http://www.ianhoar.com" onclick="window.open(this.href, this.target, 'height=300,width=300'); return false">Quick and dirty pop-up with inline javascript</a>

Separating logic from markup

Another way to create pop-ups is to use an event listener. That requires a bit more JavaScript and I would rather not re-invent the wheel and use a JavaScript library like jQuery.

$(document).ready(function() {
	$('.pop-up').click(function() {
		url = $(this).attr('href');
		window.open(url, '_blank', 'scrollbars,resizable,height=300,width=300');
		return false;
	});
});

<a href="http://www.ianhoar.com" class="pop-up">Separating logic from markup with jQuery</a>

This function turns anything with the pop-up class attached to it into a pop-up link. You could add more functionality to this function by adding multiple window sizes and attributes.

No matter which method you choose, steer clear of using only JavaScript to open windows. It’s easy to make your links more accessible, and if you don’t have time to set up functions, just use the quick and dirty inline method above.

Check out all of the examples discussed in this post.