Uses of Pop Ups

Pop up windows are used for a variety of reasons. As much as people hate pop ups, they are still a form of advertising that works. In particular, they are used for Pay Per Click (PPC) advertising as well as banner exchange advertising.

Pop ups are also useful for open up a link to an external web site without leaving your site completely. Once the user has finished with the external site, they can close the pop up window and go back to your site.

You can also use pop up windows to request visitors to complete surveys, or for newsletter signups. They are also a useful way to display your help or frequently asked questions page.

Methods of Creating Pop Ups

There are several ways to achieve a pop up window. The simplest method is to use the html attribute for anchors. The attribute can be either target=”_blank” or target=”_new”. For example:

<a href="/developer/20051017/javascript-pop-up-windows.html" target="_blank">Pop Up (target="_blank")</a>

<a href="/developer/20051017/javascript-pop-up-windows.html" target="_new">Pop Up (target="_new")</a>

Using these html attributes is quite limited as it’s not possible to define options such as the size of the popup window, whether the address bar is shown, whether the window can be resized and so on. The target attribute will also only work when the visitor clicks on a link.

Another method to achieve pop up windows is to use javascript. Javascript is a programming language where the scripts are downloaded onto the visitor’s computer and executed by the user’s browser (client side).

This article will discuss the window.open method for when a visitor clicks on a link.

Javascript Pop Up window.open method

The basic window.open javascript function is as follows:

window.open( "URL" , "windowName" [, "windowAttributes" ] )

The window.open function will require the URL of the pop up window, as well as a window name. Window Attributes are optional.

Using the javascript window.open method can create a popup window with various attributes. You can have a pop up window that doesn’t display the status bar, toolbar, location and menubar etc. This method also allows you to define the size of the pop up window and where the window will pop up, eg centered or almost off screen.

Here is the list of possible options for a pop up window using the window.open function:

The Javascript Function

This javascript function uses the window.open method to create a pop up window when a link is clicked. It can be used for enlarging thumbnail images, newsletter signups or displaying the help or FAQ page.

Copy the following javascript function into either:

1. the head section of your html
2. an external javascript page

function popUp(URL) {
eval(window.open(URL, 'popUpWindow', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=800,height=600,left = 220,top = 100'));
}

Using the Javascript Function

Use the javascript function in place of a URL in the html of a link. Example:

<a href="javascript:popUp('/developer/20051017/javascript-pop-up-windows.html')">Open this article in a Popup Window</a>