How to Make a Window Pop Up with JavaScript


If you are on my webpage, you are already QUITE familiar with popup windows. One use of these is for those annoying banner ads that Tripod and others have appear on your screen whenever you go to a pages. But, there really are uses for these things other than for banner ads. I use them for popup definitions on my web pages. I hate having to go back and see what some new term means. I don't much prefer the common method of documents jumping back to where the term was initially defined. So, the colored words on my page pull up definitions in popup windows. Now you can refresh your memory (the one in your brain, not your computer) and you don't have to go back to find the term and lose your place on the page. After all, it's not like you can leave your finger there to hold your place!! The entire code that you could cut and paste into your web page to make a window pop up looks like:

<SCRIPT LANGUAGE="JavaScript">

<!-- HIDE
function popup() {
var newWin = window.open("method.html", "method_desc", "status=no,width=300,height=200")
}
//STOP HIDING -->

</SCRIPT>

<A HREF="#" "onClick=popup()"> Pop Up Window </A>

The following explains this code piece by piece:

You must first let the browser know you are using JavaScript. This is done with the line:

<SCRIPT LANGUAGE="JavaScript">

<SCRIPT is an HTML tag so it must be paired with a the closing tag </SCRIPT>. This is inserted after the lines that define the function.

It is also recommended that you 'hide' the code from non-JavaScript enabled browsers. Otherwise, since they won't understand the code, they will attempt to display it on the screen. The code looks like:

<!-- STUFF TO HIDE GOES HERE -->

For multiple lines of code and to include commented tags, a good way to do this is:

<!-- HIDE
Function inserted between the commented tags
//STOP HIDING -->

The actual JavaScript code that defines the properties of a new window to pop up on the screen is:

function popup() {
var newWin = window.open("method.html", "method_desc", "status=no,width=300,height=200")
}

There is a lot going on here.

function popup() {

This gives the function a name.

var newWin =

This declares the new window as a variable. What this does is to provide a way to bring it back later by the variable name. This is not required for the function to work.

window.open(

'window' is the object and 'open' is the method of that object. This is the actual JavaScript code to make a new window appear on the screen. You could simply type into your web page window.open() and a blank window would open with all the default values. I don't know WHY you might want to do this, but you could.

"method.html"

This tells what html file you want to appear in the window that pops up. It could be an image instead if you wanted.

, "method_desc"

Here, once again, I am simply naming the window. I can now use links to target this new window by name from other pages.

, "status=no, "

There are many features available for a new window. If no features are specified, they will all default to '=yes'. The group of specicfied feature options must be enclosed in quotation marks. Specifically this code tells the window not to include a status bar. But, it does a lot more than is apparent. Once any single feature is set to '=no' all features default to '=no' unless then set to '=yes'.

width=300,height=200

The size of the window is a feature that can be set, as is done here.

Now that we've defined what we want to pop up, one of several methods must be utilized to cause the window to pop up. These can either be automatic or based on user action.

This example demonstrates how a user action of clicking can cause the window to be launched with the onClick method:

<A HREF="#" "onClick=popup()"> Pop Up Window </A>

This will make the highlighted text 'Pop Up Window' on the page cause the window to appear when clicked.

One automatic way to get the window to pop up is to cause it to do so whenever a page loads. The code for this is:

<BODY onLoad="popup()">

This is the same <BODY> tag that should be at the top of any page you build (<BODY> is a highly recommended tag, but not absolutely required). You simply insert the onLoad="popup()" code between the <BODY and the closing >. This is what Tripod and others do to launch their banner ads.

That's it. By putting those few lines of code in your HTML page, you can now amaze, amuse and annoy your friends with pop up windows!!

Return to JavaScript Online


This page has been visited times.