Recipe 6.4. Creating Effective Pop-up Windows


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


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

 function openWindow(address, name, width, height) { = "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 =, 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.


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 the main browser window. Many savvy web surfers, intent on preserving the integrity of their browsing experience, block automatic pop-up windows using built-in browser settings or add-on utilities. Others just dismiss the offending pop ups as quickly as they appear and get on with the reason they came to the site.

In a typical setup, a user's pop-up blocker will not prevent additional windows from opening when she requests the action by clicking a link. In this scenario, a pop-up window provides an ideal forum for presenting ancillary information about the content on the originating page without leading the visitor away (possibly forever) from the page. Potential uses include FAQs related to a sales-oriented landing page, enlarged or alternate views of products, glossary terms, or context-sensitive technical support for a complex web application. Pop-up windows that contain an "Email this page" form, a real-time web chat interface, or other useful tools also are fairly common (see Figure 6-2). But the sketchy reputation of pop-up windows demands that you use them judiciously and be explicit about when and why a link opens a pop up.

Figure 6-2. Pop-up windows are welcome guests in the browsing experience when they are invited and do something useful

There are two tried and true methods for opening additional browser windows with HTML and JavaScript. One uses the target attribute of the <a> tag, like this:

 <a href="popup.html" target="_blank" title="New Window - Short Explanation">Pop-Up Window</a> 

The title attribute displays a small hovering annotation of the link's purpose or destination when a visitor mouses over the link. For more information, see Recipe 6.3.

The _blank value is one of four reserved target values. Using it ensures that the link will open in a new window. You also can specify a custom value, such as popup, but if a window with the name popup is already open, the link will load in that window.

The JavaScript method offers more control over the properties, and more importantly, the size of the window into which the link gets loaded. Small pop-up windows reinforce the perception that its contents are supplemental to the main window. To create a 480x360 pixel pop up with a link, use the open( ) method of JavaScript's window object. The method takes three parametersurl, name, and features:

 <a href="#" title="New Window - Short Explanation" onClick="'popup.html','popup','width=480,height=360');">Pop-Up Window</a> 

The link code presented in the Solution includes both the target attribute and the JavaScript onClick() event handler methods to ensure that it works for users with JavaScript disabled. Adding return false; to the function call prevents the same window from opening twice when a visitor clicks the link.

The openWindow( ) function shown in the Solution uses the command and improves on it with additional code. The first line: = "main"; 

gives the originating window a name to which links and forms in the pop-up window can refer. For example, you can code links in your pop-up window to open back in the main window, like this:

 <a href="anotherpage.html" target="main" title="Another Page - Loads in Main Window">Another Page</a> 

The next three lines define a variable containing a string of pop-up window options that will be passed to the actual ) command. First, the width and height parameters that are passed to the openWindow( ) function from the link:

 var features = "width=" + width + ",height=" + height + ","; 

Then additional features grant the user some control over the pop-up window:

 features += "resizable=yes,scrollbars=yes,status=yes,"; 

while other features eliminate most of the window's frame to restrict the functionality of the pop up:

 features += "menubar=no,toolbar=no,location=no,directories=no"; 

In addition to presenting your pop up in a stripped-down browser window, you should take steps to make sure that visitors can't get to or leave the page except by the link that creates it. First, design your pop-up windows without any of the site navigation that you would include on the other, main pages of your site. Add a <meta> tag to the <head> section of your pop-up page code to exclude it from search engine indexing:

 <meta name="robots" content="noindex, nofollow"> 

See Also

Recipe 6.3 explains how to use the title attribute in links.

Web Site Cookbook.
Web Site Cookbook: Solutions & Examples for Building and Administering Your Web Site (Cookbooks (OReilly))
ISBN: 0596101090
EAN: 2147483647
Year: N/A
Pages: 144
Authors: Doug Addison

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: