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.
