This tutorial shows how how to create custom sized and positioned popup windows with javascript. Popup windows
can be used to display help message windows, images in a bigger format, and others.
Creating a new browser window with javascript allows you to setup the following parameters:
width, height, location on screen (distance from left up window corner to left up screen corner),
wether to show or not toolbars, status bar, menubar, scrollbars and wether to be or not resizable.
However, different browsers support or not these attributes. More details about what attributes
some browsers support you will find with further in this tutorial.
See below an example of working popup window:
Click to see a demo popup window
The Javascript function that displays the window is listed below:
<SCRIPT language="JavaScript">
<!--
function popup_window(url,w,h)
{
var width=w;
var height=h;
var from_top=350;
var from_left=500;
var toolbar='no';
var location='no';
var directories='no';
var status='no';
var menubar='no';
var scrollbars='yes';
var resizable='yes';
var atts='width='+width+'show,height='+height+',top='+from_top+',screenY=';
atts+= from_top+',left='+from_left+',screenX='+from_left+',toolbar='+toolbar;
atts+=',location='+location+',directories='+directories+',status='+status;
atts+=',menubar='+menubar+',scrollbars='+scrollbars+',resizable='+resizable;
window.open(url,'win_name',atts);
}
</SCRIPT>
To use this funtion with HTML code use the following line:
<a href="javascript: popup_window('popup_demo.html',300,200)">Click to see a demo popup window</a>
The code explained:
The function takes as parameters the url of the page displayed in the popup window, the window hight and
the window width. The other window parameters are set inside the funtion:
- width - the width of the popup in pixels
- height - the height of the popup in pixels
- from_top - distance in pixels from the top of the screen to the top of the window
- from_left - distance in pixels from the left side of the screen to the left side of the window
- toolbar - if the tolbar should be shown. The toolbar contains the Back, forward buttons, etc. This
parameter is not supported by Opera browsers.
- location - if the location bar is shown
- directories - if the directories bar is shown. This parametter is not supported in Opera, Safari and Explorer on Mac
- status - if the status bar is shown. Not supported in Opera (always no)
- menubar - if the menubar is shown. The menubar contains File, Edit, etc. Not supported in Opera (always
no).
- scrollbars - if the popup should have scrollbars if it needed. This parameter is always yes
in Explorer Mac, Safari and Opera, even if set to no.
- resizable - if the popup is resizable. The popup is always resizable in Mozilla, Safari and Opera.
The line that actualy creates the window is:
window.open(url,'win_name',atts);
The first parameter is the url of the page to be displayed.
Second parameter is the window name and it can be any name you like.
Third parameter gives the window attributes.
If you found this tutorial useful you might be interested to read the following:
Javascript Text Box Characters Counter
Javascript Disable Right Click
Javascript Wait While loading Page Image Display
