O'Reilly logo

Web Site Cookbook by Doug Addison

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required