The code is fairly simple, but there are a few ways to do this. One way uses the open method; another way uses the showModalDialog method; and another way uses the showModelessDialog method. I'll explain each of these below.
The open method does just that: it opens a new page. Similar to the navigate method, by default it will open the page in the current browser window. However, unlike the navigate method, the open method also has parameters that allow for opening in a new window and for specifying the appearance of that window. The open method has the following signature:
window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
If you take a look at the help topic for the open method, you will get specific information about each of the parameters, but here are the basics:
- sURL is the address for the new page.
- sName is the value of the target attribute for an A element; which for this tip will be "_blank" to open a new window, but which could be the name of a frame or another window.
- sFeatures specifies the display options for the window, including height and width.
- bReplace specifies whether the new URL is added to or replaces an item in the browser's history list.
For this tip, we are only concerned with the first three parameters and will omit the fourth. So here's the code:
This code opens a new browser window that is 340 pixels high and 240 pixels wide and displays the Microsoft home page. You could add options to the sFeatures parameter string to hide the status bar, hide the scroll bars, prohibit resizing the window, and more. The help topic noted above has the complete list of options and possible values. All you need to do is add them to the sFeatures parameter string, separating each name=value pair with a space.
The showModalDialog method is another way to show a page in a new window of a specific size, but when you use the showModalDialog method, the user can't return to the first window until he/she closes the modal dialog window. This is especially useful when you need you need to return values from the dialog (which I'll save for a future tip). When you use the showModalDialog method to open a new window, the new browser window cannot be resized. The signature for the showModalDialog method is as follows:
window.showModalDialog(sURL [, vArguments] [, sFeatures])
If you look at the help topic for the showModalDialog method, you will get specific information about each of the parameters, but here are the basics:
- sURL is the address for the new page.
- vArguments passes values to the dialog box.
- sFeatures specifies the display options for the dialog box, such as height, width, and whether to show the help button, scroll bars, menu bar, etc.
For this tip, we are concerned only with the first and third parameters. Here's the code:
This code opens a new browser window that is 340 pixels high and 240 pixels wide and opens the Microsoft home page. You can add additional dialog box features by adding them to the sFeatures string, separating each name=value pair with a semicolon. The help topic mentioned above lists all the features and possible values."
The showModelessDialog method is similar to the showModalDialog method except that the user can move between the first page and the modeless dialog window. As with the showModalDialog method, when you use the showModelessDialog method to open a new window, the new browser window cannot be resized, and the dialog box always stays on top. The signature for the showModelessDialog method is as follows:
window.showModelessDialog(sURL [, vArguments] [, sFeatures])
You will notice that the signature for the showModelessDialog method is the same as the showModalDialog method. If you look at the help topic for the showModelessDialog method, you will get specific information about each of the parameters and the possible values. As with the previous code, for this tip, we are concerned only with the first and third parameters. Here's the code:
You'll probably notice that the only difference between this code sample and the previous one is the name of the method. This is because the signatures are basically the same. You can add options to the sFeatures parameter to change the look of the dialog box.
Pulling it All Together
In my typical style, I like to make things difficult, so here's a final code sample that creates a new window that is 300 by 500 pixels, removes the scroll bars, address bar, menu bar, and status bar, and prohibits resizing.
window.open(newPageURL, "_blank","height=500px width=300px " +
"resizable=no scrollbars=no menubar=no location=no status=no");
To add this code, or any of the previous examples, to a Web page, just paste the function in a <SCRIPT> block within the <HEAD> section of the page. Then add the function, and the URL parameter, to the event that you want to access it. For example, if you want the code to run when someone clicks on a form button, you would use the onclick event, as shown in the following code: