6.4. Creating Effective Pop-up Windows

Problem

You want to display information that supplements the current page in a second, smaller window that opens when a visitor clicks on a link.

Solution

Add this JavaScript function to the <head> section of your web page:

	function openWindow(address, name, width, height) {
	         window.name = "main";
	         var features = "width=" + width + ",height=" + height + ",";
	         features += "resizable=yes,scrollbars=yes,status=yes,";
	         features += "menubar=no,toolbar=no,location=no,directories=no";
	         var newWindow = window.open(address, name, features);
	         newWindow.focus();
	}

Then call the function using the onClick( ) event handler in a link on your page, like this:

	<a href="popup.html" target="_blank" title="New Window - Short Explanation"
	onClick="openWindow('popup.html','popup','480','360');return false;">

Before adding the link, make sure that:

  • The link explains that it creates a pop-up window.

  • Visitors that have JavaScript disabled can get to the page, too.

  • The content of the pop-up window supplements or extends the information on the page that generates it.

  • The size of the pop-up window minimizes or eliminates the amount of scrolling necessary to see its contents.

  • Your main site navigation is not part of the pop-up window layout.

  • Search engines cannot index the pop-up window.

Discussion

Pop-up windows are a well-known and often reviled fact of life on the Web. Marketing experts, however, swear by the effectiveness of advertisements presented in windows that pop up over or under ...

Get Web Site Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial