Window Open: Creating Javascript Popup Windows

I can always tell when there is a new command that is in vogue. I start getting all kinds of email asking how to do it. Well, this is the new thing. I don’t know why, but everyone wants to know how to create these little windows that pop up. Some sites even use them as control panels operating the main window.

If you decide to go with this kind of pop up window, use it sparingly. I think they become an annoyance after a while. Sort of like some guy telling you the same joke every time he meets you. It’s fun about three times. Then you start yelling at the screen. I do at least. It really scares the cat.

But if you insist on doing one, let’s do it right! We’ll start at the beginning.

The Basic JavaScript Format

Oh yes! This is done through JavaScript. But it’s a very simple JavaScript, so don’t get worried so soon. Here’s the basic format.

Heck, you can almost guess what each of the parts does. Since this is a script, you need the opening SCRIPT LANGUAGE=”javascript” statement, and of course the /SCRIPT statement at the end. The <!– and the –> are used to hide the text from older browsers that don’t read JavaScript. You see, if you didn’t have those in there, the text would display. This way it doesn’t.
…but it’s the stuff in the middle that that makes the magic.

window.open (‘page.html’)does just what it says. It opens a window (a new browser screen actually) and fills it with the page within the parentheses and single quotes. In the example above the HTML document that fills the window is called page.html.

Is that it?

Technically yes. That little script will work and open a new browser window and you’ll get the effect. But wouldn’t it be great if we actually had the ability to configure the window any way we wanted? You bet. Here’s how.

Configuring The Window

Now we get to the commands I used on this page to get the little window effect. This is exactly what I have:

<SCRIPT LANGUAGE=”javascript”>
<!–
window.open (‘titlepage.html’, ‘newwindow’, config=’height=100,
width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no,
location=no, directories=no, status=no’)
–>
</SCRIPT>

Here’s What’s Happening

• <SCRIPT LANGUAGE=”javascript”>starts the JavaScript.
• window.openis the JS command to open a new browser window.
• ‘titlepage.html’is the name of the page that will fill the window.
• ‘newwindow’is the name of the window. This you need. We are going to use commands intended to alter the window the script is opening. In order for the JavaScript to know what item it is dealing with, the item has to have a name. So we give it one. I went with newwindow. But it could have just as easily been zork, or woohaa, or raspberry.
• config=denotes that what follows configures the window. (This command really isn’t required, but it’s a good idea to use just to keep things straight)
• height=100denotes the height of the window in pixels.
• width=400denotes the width of the window in pixels.
• toolbar=no denotes if there will be a toolbar on the newly opened window. Set this to yes if you want one – no if you don’t.
  The toolbar is the line of buttons at the top of the browser window that contains the BACK, FORWARD, STOP, RELOAD, etc.
• menubar=no denotes if there will be a menubar. Set this to yes if you want one – no if you don’t.
  The menubar is the line of items above labeled FILE, EDIT, VIEW, GO, etc.
• scrollbars=nodenotes if there will be scrollbars or not. Ditto with the yes and no deal. I wouldn’t make a new window that would need scrollbars anyway. I think it kills the effect.
• resizable=nodenotes if the user can change the size of the window by dragging or not.
• location=no denotes if there will be a location bar on the newly opened window. Use yes and no again.
       The location bar is the space at the top of the browser window where the page URL is displayed.
• directories=no denotes if there will be a directories bar on the new window. Use yes and no.
  This is the bar at the top of the browser window that has the bookmarks and such.
• status=no denotes if there will be a status bar. Use yes and no.
       The status bar is the area at the very bottom of the browser screen that tells you “Document Done”.
• </SCRIPT> ends the whole deal.

Can I Lose the Title Bar?

The answer use to be no, but there is now a script that will allow it in IE 5.0 and above browsers. I have a tutoral on it here.

Where Do I Place The Code?

Anywhere on the page. Towards the top will ensure it runs sooner in the process than if you put it at the end. It’s a pretty robust script that doesn’t need a special placement.

Page Inside A Page

The example I gave above relies on two pages. The first is the main HTML Document that carries the JavaScript. The second is the HTML Document that is displayed inside the new window.

Here I’ll get a little more fancy with the JavaScript code. I’ll show you how to set it up so that the new window is included inside the main HTML Document completely. One page – two windows.

What we have above a very basic script written by Andree Growney and myself. This JavaScript creates a “function” that opens a new window. Look up at the top line of the script after the SCRIPT LANGUAGE=”javascript” line.

The function starts with the line: function openindex(). What that does in JavaScript speak is create a function called openindex. Then whatever is inside the { and the } following that statement is what the function is supposed to do. With me so far? In the case of this function, a new window will be opened up. The next lines of the script are quite similar to what we’ve seen so far:

OpenWindow=window.open(“”, “newwin”, “height=250,
width=250,toolbar=no,scrollbars=”+scroll+”,menubar=no”);

The line calls for the creation of a new window. But, as you can see, there is no external page called for. There are just the quote marks. This forces the JavaScript to look at itself for the information.
The name of the new window is “newwin”, and the statements following define what the window will look like.
Now we get to the meat of this little ditty. Each of the lines that start with:

…denote a new line of text that will be written onto the window that is being opened. Now look down the code, note the text inside the quotes of each new line is HTML code. Thus the text written to this window is going to read as HTML code. Now, I only have a few lines here, but you can add as many as you’d like. Just be sure to continue to preface each line with the OpenWindow.document.write command. Follow the format closely. One missing quote or parenthesis can kill the entire script.
Be sure to end the script that same way I have above with the: OpenWindow.document.close()

Calling For The Function

No, you’re not done yet. Now that you have created and altered this JavaScript to your heart’s content, it still will not work as is. You see, when you create a function such as this, something must be used to “trigger” the function to work. Usually, as is the case here, you use a command in the BODY portion of the main HTML document. So here’s the deal…

• Configure the above script and place it in the <HEAD> section of your main HTML Document.
• To trigger the function, place this: onLoad=”openindex()” in the BODY command of the main HTML document. That tells the browser to initiate the function “openindex” when the page is loaded.

Closing The Window

This seems like the next logical step in the process. You made it open. Now let’s make it close. There are three way of doing it:

• Every window carries what I call the “goodbye box” on the upper right hand corner. It’s the gray square that has a little “X” on it. Click that and away it goes.
• You could offer a button on the page that closes it when the user clicks the button.
• And you could set it up so that the window closes itself.

The Code To Close The Window

I’m starting here because I don’t think I need to go over the little “goodbye box”. So…here’s the code for the button:

Place that pup on the page that will go into the new window or place it in the code in the JavaScript format above and you get a little button that closes the window when clicked.

The Window Closes Itself

OK – now we’re getting into bigger and better JavaScripts. This little performance is too much to get into here, so I will send you to the small tutorial I recently wrote.

The page is called Hello Goodbye. It’s a great script written by William Flanery. Once you go, you’ll see the effect, then have ability to grab the full working script.

Other Fun With New Windows

What you can do with these little windows is really only limited to what you can think up. Here are a few other uses that you can take from my site.

• Open a new window through an onMouseOver.
• Open a window the same size as the screen size.
• Display an image in a new window.
• So You Want A Remote Control, Huh? by Andree Growney and me opens a small window that then allows you to control the big window from the small one.

And That Does It…

Exciting, huh? Now you can make little windows pop up all over town. Again I offer my suggestion that one new window might be a welcome help to the users of your pages. However a new window every other page would bring you to level of telemarketers in some people’s minds. Use this only when they are really needed.

Enjoy!