Home » Scripts and Tricks » window.open script

Open popup window with open.window method

To open a new window by clicking on the link, you will need to use window.open method of javascript.

Sample of popup window

<a href="javascript: void(0)" 
   onclick="window.open('popup.html', 
  'windowname1', 
  'width=200, height=77'); 
   return false;">Click here for simple popup window</a>

Now you can open a simple window, also this function can have different features of that window to appear.

Syntax

window.open([URL], [Window Name], [Feature List], [Replace]);

Feature List:

Property	Default value	Description
width	auto	specifies width of the new window in pixels
height	auto	height of the window in pixels
top	auto	specifies window position
left	auto	specifies window position
directories	no	should the directories bar be shown? (Links bar)
location	no	specifies the presence of the location bar
resizable	no	specifies whether the window can be resized.
menubar	no	specifies the presence of the menu bar
toolbar	no	specifies the presence of the toolbar
scrollbars	no	specifies the presence of the scrollbars
status	no	specifies the presence of the statusbar

Click here for specific popup window

<a href="javascript: void(0)" 
   onclick="window.open('popup.html', 
  'windowname2', 
  'width=200, \
   height=77, \
   directories=no, \
   location=no, \
   menubar=no, \
   resizable=no, \
   scrollbars=1, \
   status=no, \
   toolbar=no'); 
  return false;">Click here for specific popup window</a>

Fullscreen popup window

The fullscreen parameter is supported only by Internet Exploer browser.

If you need to open fullscreen popup window in all browsers you need to use this modified function:

All browsers fullscreen popup window

<script type="text/javascript">
<!--
function popup(url) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newwin=window.open(url,'windowname4', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Fullscreen popup window</a>

Centered popup window

To open new popup window in the middle of the screen we should know the size of a window and resolution of the screen. On the basis of these data, we will calculate values for the top-left corner.

Centered popup window

<script type="text/javascript">
<!--
function popup(url) 
{
 var width  = 300;
 var height = 200;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script>

<a href="javascript: void(0)" 
   onclick="popup('popup.html')">Centered popup window</a>

Scripts and Tricks:

Guides and Tutorials:

JavaScript FAQ