Making popup windows

Popup windows are a very useful feature for websites. They can help you to give prominence to something on your site that your user may not see otherwise. Maybe you want them to subscribe to your newsletter, or you are linking to another site and you want that your visitors stay on your site while visiting the other, then you use a popup window.

Popup windows are called with the window.open method. This method accepts three arguments; the url to open in the new window, the name of the window, and a string with the window properties separated by comas. Lets see an example:

<script language=”JavaScript”>
window.open(‘http://www.yahoo.com/’, ‘mywindow’, ‘width=500,height=300,’)
</script>

on the above example http://www.yahoo.com is the page we want to visit; mywindow the name of the window to host the url; and width=500,height=300 is the desired dimension of the window. Note that if you open several windows with the name mywindow, each page will be added on the same window one after the other. Some useful values that can be placed on the name argument are _blank (which opens a blank window; and _self which opens the page on the window thatis calling it. Note also that if you don’t specify any url an empty window will be opened.

The following table list the properties that can be defined:

Property Description Default value Example

width & height
Dimensions of the window If not set the window will be full screen width=500,height=300
Left & top Distance from left and top side of the screen Defined by user computer
left=150,top=125
directories Whether or not the popup should have a directories (links) bar No directories bar
directories=yes
status Whether or not the popup should have a status bar No status bar status=yes
location Whether or not the popup should have a location(address) bar No location bar
location=yes
menu Whether or not the popup should have a menu No menu menubar=yes
toolbar Whether or not the popup should have a toolbar No toolbar toolbar=yes
scrollbar Whether or not the popup should have a scrollbars No scrollbars scrollbars=yes
resizable Whether or not the popup should be resizable No resizable resizable=yes
fullscreen Tells if the window should be full screen No fullscreen fullscreen

You can open a new window after a user takes an action on your site, like clicking on a link. Check the following example.

<html>
<body>

<script language=”JavaScript”>
function popup()
{

window.open(‘http://www.yahoo.com’, ‘mywindow’, ‘width=400,height=200,scrollbars=yes,resizable=yes’)
}

</script>
<A HREF=“http://www.google.com” onClick=“return popup()”>Popup example</A>

</body>
</html>

What we have done in the above example is to attach our popup code to a function.

The function is called whenever someone clicks on the link by using the onClick event of the link.

About the Author: Diego Botello