Basic Popup Windows

With HTML you can open a page in a new window by using . 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 the simpler example where the content to be used is defined as a separate web page. Here's an example of the code to use:

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

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

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,
continued from previous line width=250,toolbar=no,directories=no,status=no,
continued from previous line menubar=no,scrollbars=no,resizable=no'); return false;"
>click here</a>

When your visitor clicks on this link (and their browser has Javascript support enabled) then the mywin.htm page will be displayed in the new window generated by the Javascript code. This window will have the specified height and width, will have no tool bars etc. and will not be resizable by the visitor to your site. The return false; statement following the window.open statement will stop the browser from attempting to execute the link to the page referred to in the href parameter.

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:

<a href="#" onclick="self.close();return false;">Close Window</a>

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.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate