Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

Contact Us or call 1-877-932-8228


These days, popup windows are generally frowned upon; however, they can be useful in some cases. We'll look at a couple of examples, but first, let's see how to open a new window.


var newWin =,name,features,replace);

All four parameters are options:

  1. URL - the URL of the page to load. If it is left blank, a blank window is open and can be written to with newWin.document.write().
  2. name - the target attribute of the window. This can be used to reuse an existing window if it is open.
  3. features - a comma-delimited list of window features. Some of the most common are:
    1. height - the height of the window
    2. width - the width of the window
    3. left - the left position of the window
    4. top - the top position of the window
    5. location - whether or not to include the location bar
    6. menubar - whether or not to include the menubar
    7. resizable - whether or not the window should be resizable
    8. scrollbars - whether or not to include scrollbars
    9. status - whether or not to include the status bar
    10. toolbar - whether or not to include the toolbar
  4. replace - true or false. If set to true, the new page replaces the current page (if there is one) in the browser window's history.

The height, width, left, and top features should be set in pixels.

The location, menubar, resizable, scrollbars, status, and toolbar features are boolean values: "true" or "false", "yes" or "no", or "1" or "0" will work.

The HTML5 specification advises browsers to ignore the features arguments completely, and some modern browsers do choose to ignore all but the size and positioning features.

The example below shows how to open a new window:

Code Sample:

<meta charset="UTF-8">
<title>New Window</title>
var eula;

function openWin() {
	eula ="eula.html","eula","height=200,width=300,left=100,top=100");

function eulaChecked() {
	if (document.getElementById("confirmEula").checked && typeof eula == "undefined") {
		alert("Come on now.  Don't you think you should read the EULA first?");
		document.getElementById("confirmEula").checked = false;
	} else if (document.getElementById("confirmEula").checked && !eula.closed) {
	} else if (!document.getElementById("confirmEula").checked) {
<form action="">
<input type="checkbox" id="confirmEula" name="confirmEula" onclick="eulaChecked()"> Check to confirm that you agree with our <a href="eula.html" onclick="openWin(); return false;">user agreement</a>.

Code Explanation

Things to notice:

  1. We make eula a global variable so that we can access the window object from within multiple functions.
  2. In the openWin() function, we call eula.focus(); after opening the window. That's to bring the window to the foreground if it's already been opened.
  3. In the eulaChecked() function:
    1. We first check to see if the confirmEula check box has been checked before the EULA window has been opened (i.e., before a window object has been assigned to the eula variable). In this case, we scold the user and pop up the EULA window.
    2. We then check to see if the confirmEula check box has been checked and the EULA window is left open, in which case we close the EULA window via the window object's close() method.
    3. Finally, if the confirmEula check box has been unchecked, we pop the EULA window back open.

This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.