Popup Windows

1. Basic Popup Windows

With HTML you can open a page in a new window by using target="_blank". The problem with this is that you have no control over the size of the new window that is opened, where it is positioned on the screen, or what browser control bars display on that window.

We can gain that control over the popup window that we are opening by using Javascript to open the new window instead of HTML. The content of the new window can either be a separate web page or can be dynamically created by the Javascript. In this tutorial we will consider how to create a simple popup where the content to be used is defined as a separate web page.

Here's an example of the code to use to create our simple popup window:

window.open('mywin.htm','name','height=255,width=250,
toolbar=no,directories=no,status=no,menubar=no,
scrollbars=no,resizable=no');

The window.open Javascript method is used to open a new browser window. The method takes three parameters.

• The first parameter contains the file name of the web page that is to be opened in the new window. In the example we will be displaying a file called mywin.htm in the new window.
• The second parameter contains a name that is being assigned to the new window. If we use the same name for several different popup calls then the second and subsequent calls will not open a new popup window but will instead use the one of the same name that is already open.
• The third parameter defines the size of the window, what toolbars it is to display, and whether or not it can be resized by your visitors. In the example we have set the height of the new window to 255 pixels and the width to 250 pixels. Also no toolbars, menu bar, status bar, scrollbars, or directories will be displayed for the new window which cannot be resized by your visitors.

So how do we actually execute this code? Well that depends on exactly when we want the popup window to appear. Let's say that we want the window to appear as a result of clicking on a link. In this instance the code that we use might look something like this:

<a href="mywin.htm" target="name"
onclick="window.open('mywin.htm','name','height=255,
width=250,toolbar=no,directories=no,status=no,
menubar=no,scrollbars=no,resizable=no'); return false;"
>click here</a>

The href and target tags are included for those visitors who don't have Javascript enabled in their browsers. In this instance the mywin.htm page will still be opened in a new window but all of the toolbars will be there and you will not have control of how big the window is.

For an example of how this script works click here.

You will notice that I have placed a link at the bottom of the page in the popup window that can be selected to close the window. The code that needs to be included to do that is as follows:

The self.close method is a command to close the current object (in this case the popup window). If the window has been displayed and Javascript is not enabled then the link will effectively do nothing - those visitors will have to close the window the way that they normally close browser windows.

Another way that you can use popup windows is to display then either when your visitor first enters the page or when they exit from the page. You do this by executing the window.open command in either the onload or onunload parameter of the body tag.