Open and Center Window with Javascript

Posted on April 7, 2011 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

In this tutorial we will learn how to create a function in JavaScript that will open a new window and how we will center the window through some mathematics equations.

With JavaScript you can create dynamic HTML websites which is very useful for different things such as form security, open new window from a link, display date and many things. To understand JavaScript language you will need to be familiar with C++.

In this post we will study the command below:"link", "title", "settings");

The attributes for this function are the following:

  • link
  • window title
  • window settings

And below we have some window settings equal with 0 (False) or 1 (True):

toolbar = 1 | 0 (True or False)
location = 1 | 0 (True or False)
menubar = 1 | 0 (True or False)
directories = 1 | 0 (Internet Explorer Only)
resizable = 1 | 0 (True or False)
fullscreen = 1 | 0 (Internet Explorer Only)
status = 1 | 0 (True or False)
scrollbars = 1 | 0 (True or False)
width = 200 (Width of the window - in pixels. Minimum is 100)
height = 200 (Height of the window - in pixels. Minimum is 100)
left = 100 (Left position of the window - in pixels. Default is 0)
top = 100 (Top position of the window - in pixels. Default is 0)

To declare a custom function that can be called using the onclick event, we need to provide a name and some attributes (if any) for our function:

function your_function_name(url, width, height) {

	// Your commands will be here


Enough with the theory. Let's create our custom function with the function inside it:

function open_window(url, width, height) {
	var my_window;

	my_window =, "Title", "scrollbars=1, width="+width+", height="+height+", left=0, top=0");

To call our newly function, we need to write the JavaScript code inside the href attribute or we can use the onclick attribute:

<a href="javascript: open_window('file.html',900,600);">Open New Window</a>

<!-- OR -->

<a href="javascript: open_window('',900,600);">Open New Window</a>

<!-- OR -->

<a onclick="open_window('file.html',900,600);">Open New Window</a>

Now, to center our window, we need to think to a mathematical equation that will help us. Remember that the default window top (Y Axis) and left (X Axis) position is 0.

So here is an example:

  • If we have a 1024x768 desktop resolution
  • We will divide by 2, both width and height
  • Left Position will be: 1024 / 2 = 512 ( Screen Width / 2 = Half )
  • Top Position will be: 768 / 2 = 384 ( Screen Height / 2 = Half )

To center window we need to lower the top and left position with the window width and height divided by 2

  • (Desktop Resolution Width / 2) - (Window Width / 2)
  • (Desktop Resolution Height / 2) - (Window Height / 2)

Below is an image that explains this equation:

Open and Center Window with Javascript

Final Code to Open and Center Window with Javascript

So now our function will look like this:

function open_window(url, width, height) {
	var my_window;

	// screen.width means Desktop Width
	// screen.height means Desktop Height

	var center_left = (screen.width / 2) - (width / 2);
	var center_top = (screen.height / 2) - (height / 2);

	my_window =, "Title", "scrollbars=1, width="+width+", height="+height+", left="+center_left+", top="+center_top);

Now your function is finished and the new popup window should open in the center of the screen. You can check the live demo below or you can download the files directly.

Live Demo

Download Files

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4.50 out of 5)
Related Articles
  1. Gravatar Icon Kebens:

    “to center window ” Not working in latest (26) google chrome.

    • Hello Kebens,
      We just tested on Google Chrome (Latest Version: 26) and it seems OK, only a bit down from center with few pixels. What you saw wrong there?

  2. thanks a lot i have added your code to my site, load single game in full screen mode.

  3. nice, we can add more variable like toolbar,status,resizable,location.
    thanks for explanation \m/

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

4 + = 7

Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (, built under WordPress platform.