Popup Windows
Opening a new window is a popular way of letting your users see additional information without navigating away from the current page. With JavaScript you can specify the dimensions, position and visible toolbars of this newly created window, as well as writing code directly into it and having the two windows operating together.
This page was last updated on 2012-08-21
Opening New Windows
Opening new windows is easy enough in plain old HTML, using the target attribute on your links, like so:
<a href="example.html" target="_blank">link text</a>
This will open the new page in a new window, and is perfect for most people’s needs. However, if you want more control over this new window, you will need to use some JavaScript code. To get a rudimentary page to pop up off your main page on command from a link, you'll need the following JavaScript code and JavaScript link:
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'name','height=400,width=200');
if (window.focus) {newwindow.focus()}
}
<a href="javascript:poptastic('poppedexample.html');">Pop it</a>
We're simply defining a new JavaScript function, which we can pass different URLs to each time. This will open the specified url in a new, downsized window, the dimensions of which are set down in the function. Try it here: » Pop it
The HTML for that link simply called the function with the URL of the page we want to pop up as an argument. It looks like this:
<a href="javascript:poptastic('/examples/poppedexample.html');">Pop it</a>
We load the new window (created with the window.open() method) into a variable. This method then takes three arguments: the address of the new page, the name of the window, and a third argument which can hold some, few, or less optional attributes of the window, such as the height and width which I've defined in this case.
The url we're using is passed to the function when we call it, so that this function can be used for any number of different popups (though the height/width and other options will always be the same unless you modify the function to take more arguments). Some browsers prohibit the opening of pages on another server for security reasons, so test your script. The name we specify will be used to open further pages into this new window.
The Arguments
You have a number of options for the third argument. When you define any of them, the remaining Boolean values (which can be true/false or yes/no or 1/0) are all set to false/no/0. Whichever you choose to use, all of your options go into the same quoted string, with commas between the values, and no spaces are allowed between them.
height- Defines the height of the window in pixels. Percentage values don't work.
width- Defines the width. Again, you'll have no joy with percentages.
left- Supported by version 4 browsers and above, this sets how far removed the window appears from the left of the screen. In pixels.
top- Partner to
left, this pushes the window off the top of the screen. resizable- Set to true or false, this may allow the user to resize the window.
scrollbars- Another Boolean value, this adds scrollbars to the new window. If your content may be longer then the dimensions you've specified, make sure this is set to
yes. toolbar- Specifies whether the basic back/forward toolbar should be visible. If there are links to follow in your new page, set this to
yes. menubar- Specifies whether the main toolbar (File, Edit, ...) is shown.
location- Specifies whether the location toolbar (address bar) is shown.
status- Specifies whether the new window can have a status bar. Best set to
yes. For security reasons, Mozilla-based browsers always show the status bar. directories- Specifies whether the directories toolbar is shown (Links toolbar in IE).
fullscreen- Internet Explorer-only Boolean attribute which may open the window in fullscreen. It's annoying — don't use it.
dependent- Netscape 4-only attribute which makes the popup dependent on the status of the main window. If the main window is closed, the popup closes with it.
screenX&screenY- Old Netscape attributes for defining the window's position on the page. Use
leftandtopin their place.
So, a fully kitted-out new window might look more like this:
newwindow=window.open(url,'name','height=500,width=400,left=100, top=100,resizable=yes,scrollbars=yes,toolbar=yes,status=yes');
Focusing and Closing
Two vital little tricks can make your popups infinitely more usable. Firstly, in our function at the start of this page, we executed the following code once the window had been created:
if (window.focus) {newwindow.focus()}
First we check whether the focus() method is supported — this is vital to stop JavaScript errors. If it is, we set the browser's focus on the new window, so that as soon as it is affected it is at the front of the display. While the browser always gives new windows the focus when they're first created, it doesn't refocus when you send another page to a window that's already open. Omitting this method may leave your new window hidden behind the main window, depending on what else is happening at the time.
Adding the option to close the window is just good practice and you should always add it to your popups. From the main window, we write
<a href="javascript:if (newwindow) newwindow.close()">Close</a> the popup.
First checking if the popup is open (the if() statement checks if the variable has a value), and then using the close() method. Try it here: close the window.
From inside the popup itself, the code is simply
<a href="javascript:window.close()">Close</a> this popup.
Linking to Windows
Once you have popped a window open, you can direct further links into it with the target attribute. If we have defined name to be 'popsome', we can make links open into this window with
<a href="page.html" target="popsome">Link</a>
If the popup window has already been closed your browser will open a new, normal window, and set its name to whatever you've specified as the value of target. Try it with these: Open and then open a new link inside it. Then close.
Accessible Popups
Throughout the examples above I've been using the javascript: link style. This is an easy way to execute JavaScript functions, instead of linking to a dummy anchor and using event handlers, as in
<a href="#" onClick="poptastic('page.html');">Pop it</a>
For modern browsers we can write
<a href="javascript:poptastic('page.html');">Pop it</a>
This is an easy way to show popups in action, but is not the recommended way of actually doing popups for real. Creating popups using the javascript: mechanism is bad for two reasons:
- Users using browsers that don't support JavaScript (or who have disabled JavaScript) won't be able to follow these links, and so will miss the potentially vital information contained in your popups.
- Most browsers allow you to right click a link and either open it in a new window or a new tab. Since these links don't have proper
hrefvalues, they'll open blank windows, which can be very annoying.
To this end, there is a more gracefully degrading method of linking to popups, which allows the links to work both ways. The ideal version of the above link is
<a href="page.html" onClick="poptastic(this.href); return false;">Pop it</a>
This will create a link that opens the popped page as a normal page in a non-JavaScript browser. In a modern browser this default action is suppressed (by return false) and the page is popped up as you want it. The URL you're opening is set as this.href, which tells JavaScript to look at the href value of the current link and use that, meaning you don't have to write the same URL twice. » Try it here. You should always code your popups like this, so nobody is left out.
Writing to the Window
Being able to generate an entirely new page from the code of an existing page has advantages. You don't need to create a whole new page for each of your popups, and so the popup content is already loaded when the main page is. First, let's » generate a page.
function dirtypop()
{
var generator=window.open('','name','height=400,width=500');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('<link rel="stylesheet" href="style.css">');
generator.document.write('</head><body>');
generator.document.write('<p>This page was generated by
the main window.</p>');
generator.document.write('<p><a href="javascript:self.close()">
Close</a> the popup.</p>');
generator.document.write('</body></html>');
generator.document.close();
}
<a href="javascript:dirtypop();">Generate!</a>
As you can see, we create a new window as a variable again, and then use the variable name in place of window (which normally comes before document) to write directly into it. The document.close() method at the end is not the same as window.close() — in this case it signifies that we've stopped writing to the window. Note that any stylesheet information you have on your main page is not carried through to the popup; you must write the style information into the popup code.
Generating windows like this does bring some problems. For one, the URL of the page is really up to the browser. Some leave it as 'undefined' or 'blank', while others just give it the URL of the main window, which brings up all sorts of issues. You can check what your browser reckons the URL is with the view URL link I added to the window above. Thankfully, while some browsers see the popup as a conjoined part of the same page, self.close() will always close just the popup, not its parent window.
