JavaScript
Popup Windows?

JavaScript popup windows are web pages, but with one slight difference: when a popup window creation is done through JavaScript, it's the JavaScript that has the control of the look and feel of the new window.

If you already know how to use JavaScript (at least a little),
then just click here to go to the Popup Creator page.

With pure HTML it is possible to open another browser window with the “target” attribute. This can be done by using a form action or by using a link:

HTML popup link example (without JavaScript):

<a href="http://www.1stoppopup/popup1.htm" target="anotherWindowName">Open new window</a>

The problem with this pure HTML approach is that you cannot control the second window. Sure, you can name the window, you can also change the windows location, but you cannot control its height, its width, the toolbar's presence, etc.

JavaScript (a browser scripting language created by Netscape) has a method that permits us to open windows: the JavaScript window.open() method.

The syntax of the window.open() method is simple:
variablename = window.open('URL', 'windowname', 'properties')

If fact, the JavaScript command window.open('URL', 'windowname', 'properties') is more than sufficient to open a window, but we have better control on the newly created window if we reference it with a variable.

The URL is the name of the file that we want to open.

The windowname is the target name of the new window.

The properties are the new window's properties:
Width, Height, Top, Left, Location bar, Directories, Menu bar, Tool Bar, Status Bar, Resizable and Scroll Bar.

JavaScript popup code example:

variablename = window.open('http://www.1stoppopup.com/popup1.htm', 'thepop', 'width=400,height=300,top=200,left=200,directories=no,location=no,menubar=
no,scrollbars=no,status=no,toolbar=no,resizable=yes');

This example will open a popup window located at the following URL: http://www.1stoppopup.com/popup1.htm, the popup window will be called "thepop" (you will not see that name on the window, its the JavaScript name of the window) and the window will open with a width of 400 pixels, a height of 300 pixels, at 200 pixels from the top and 200 pixels from the left, and with only the window's resizable property. Click here to test this popup.

When you program this type of code, be very careful with the syntax. All the name-value pairs must be separated by commas, but must not have spaces between them.

If a particular property parameter is not specified then its value defaults to no.

JavaScript popup window properties:

Property	Value	Description
width	number	Specifies the width of the window in pixels
height	number	Specifies the height of the window in pixels
top	number	Specifies the top location of the window in pixels
left	number	Specifies the left location of the window in pixels
directories	yes - no	Shows the standard browser directory buttons
location	yes - no	Shows the Location entry field of the browser
menubar	yes - no	Shows the menu at the top of the window
scrollbars	yes - no	Shows the horizontal and vertical scrollbars
status	yes - no	Shows the status bar at the bottom of the window
toolbar	yes - no	Shows the standard browser toolbar
resizable	yes - no	Controls the users ability to resize the window

Lets make a JavaScript popup:

1- The JavaScript popup code:

This JavaScript code goes between the <head> and </head> part of the HTML page.

2- The HTML popup form:

This code goes in the body part of the HTML page (anywhere between the <body> and </body> tags):

<form action="" method="post" name="Letsdoit" id="Letsdoit">
<table width="480" border="1" cellspacing="0" cellpadding="4"> <tr>
<td colspan="2">URL: <input name="furl" type="text" id="furl" value="http://www.1stoppopup.com/popup1.htm" size="43"></td>
<td width="33%">Name: <input name="fwinname" type="text" id="fwinname" value="windowname" size="15"></td> </tr> <tr> <td width="34%"><div align="center">width: <input name="fwidth" type="text" id="fwidth" value="400" size="8" maxlength="4"> </div></td> <td width="33%"><div align="center">
height: <input name="fheight" type="text" id="fheight" value="300" size="8" maxlength="4">
</div></td> <td><div align="center">menubar: <input name="fmenubar" type="checkbox" id="fmenubar" value="yes"> </div></td> </tr> <tr> <td><div align="center">top: <input name="ftop" type="text" id="ftop" value="100" size="8" maxlength="4">
</div></td> <td><div align="center">left:
<input name="fleft" type="text" id="fleft" value="100" size="8" maxlength="4">
</div></td> <td><div align="center">scrollbars:
<input name="fscrollbars" type="checkbox" id="fscrollbars" value="yes">
</div></td> </tr> <tr> <td><div align="center">directories:
<input name="fdirectories" type="checkbox" id="fdirectories" value="yes">
</div></td> <td><div align="center">location:
<input name="flocation" type="checkbox" id="flocation" value="yes">
</div></td> <td><div align="center">status:
<input name="fstatus" type="checkbox" id="wmen3" value="yes">
</div></td> </tr> <tr> <td><div align="center">toolbar:
<input name="ftoolbar" type="checkbox" id="wmen4" value="yes">
</div></td>
<td><div align="center">resizable:
<input name="fresizable" type="checkbox" id="wmen5" value="yes">
</div></td>
<td><div align="center">
<input type="button" value="Lets do it!" onClick="DoWindow(this.form)">
</div></td> </tr>
</table>
</form>

The previous HTML code gives the following form:

Enter the popup URL, the windows properties, and click on the "Lets do it!" button. Go ahead! Test it! Try it with your web page's URL, or with www.yahoo.com!

If you wish to get a web page with all the
JavaScript popup code and HTML code
shown in the above example
— all ready prepared for you —
just enter your name and email address

Please Note:
This is a SPAM-FREE site. Your name and email address will NEVER be sold or traded.

Join those who already benefit from the 'Popup Secrets eCourse'.
Read it, study it, learn from it and PROFIT!

The Popup Secrets eCourse will show you:
• The best way to use an entrance popup.
• What is the secret foundation of a solid internet marketing strategy.
• The two and only two (2) possible purposes a web site can have.
• What to put in an exit pop
(if you don’t use this secret, you will lose money!)
• How, by installing just one popup, you can stop loosing customers
and more!

How does all that JavaScript popup code work?

Glad you asked!

< !-- popup window script by Dominique Peladeau
<!-- tells the JavaScript that it's a comment line (and to the HTML and the old browsers to ignore the line)

function DoWindow(Letsdoit) {
the function name is "DoWindow" and its parameter is the variable "Letsdoit" (in this case the variable refers to the HTML form's name), and finally "{" signals the beginning of the JavaScript function.

The rest of the JavaScript code is fairly simple:

var URL = Letsdoit.furl.value;
the variable "URL" takes its value from the "furl" textfield input value. To refer to this value I use the following syntax: FormName.InputFormName. Don't forget the ";" at the end of the JavaScript line. The ";" separates the small JavaScript segments of code. Note: you could also get the URL value by using this syntax: "document.formName.itemName.value"
i.e. in this case: "document.Letsdoit.furl.value"

var windowName = Letsdoit.fwinname.value;
the variable windowName takes its value from the "fwinname" input textfield located in the "Lestdoit" form.

var properties = 'width=' + Letsdoit.fwidth.value +
',height=' + Letsdoit.fheight.value +
etc. The variable properties is a text variable that we construct by joining our parameters together. For example, 'width=' + Letsdoit.fwidth.value
becomes 'width=400', etc.

Now that all our variables are defined, the DoWindow(Letsdoit) function is ready to give the window.open command:
window.open (URL, windowName, properties);

Finally, the "}" signals the end of the function.

If I had more JavaScript functions to define, I would put them after the closing bracket "}", but before the closing </script> tag because </script> signals the end of the JavaScript code.

That's it! Our JavaScript function is defined.

How do we call the JavaScript popup function?

Its not because a function is defined that it runs all by its self. We have to call the JavaScript function. In the above case we do this with our submit button "Let's do it!" located at the end of our HTML form:

<input type="button" value="Lets do it!" onClick="DoWindow(this.form)">
The important part is "onClick="DoWindow(this.form)".

When we click on the "Lets do it!" button the "onClick" event starts the popup process by telling the JavaScript interpreter to do the "DoWindow" function with the "(this.form)" argument ("this" is the document, "form" is the form's name "Letsdoit").

That's it!

But how do we make the popup
without the form?

With Popup Creator!

With Popup Creator, you can literally create a popup window — how you want it and where you want it — in less than 2 minutes (I do it in less than 10 seconds).

All you have to do is click on a few check boxes, and Popup Creator does the rest. It makes all the code for you. All you have to do is copy and paste. That’s it!

Click here for a larger screen shot
of the actual software.

(Note: the above link is a popup! — a link popup, and all the code to create it was done with Popup Creator!)

All you have to do is to fill in the configuration details for your popup window, click the 'Create Code' button to automatically generate the popup code you need and test as you go with the 'Test the Popup' button.

Once you are happy with the popup window's look and feel, just copy and paste the popup code onto your web page!

Get on the road to Popup riches today!
Fill in your name and email address and you will automatically be taken to the

Popup Creator page!

You will also receive the Popup Secrets eCourse,
an entertaining and informative ecourse.

No thank you, I do not wish to subscribe yet,
just send me to the Popup creator page.

Please Note:
This is a NO-SPAM site. Your name and email address will NEVER be sold or traded. You can unsubscribe yourself at anytime.

Join those who already benefit from the "Popup Secrets eCourse". Read it, study it, learn from it and ENJOY!

The Popup Secrets eCourse will show you:
• The best way to use an entrance popup.
• What is the secret foundation of a solid internet marketing strategy.
• The two and only two (2) possible purposes a web site can have.
• What to put in an exit pop
(if you don’t use this secret, you will lose money!)
• How, by installing just one popup, you can stop loosing customers
and more!

Click here for a working Demo of
Popup Creator

New!
Unblockable Popup Creator!
A dhtml popup that the popup blockers cannot block!

Selling or buying a house?

House for sale secrets revealed!

Click here to learn
how you can get top price for your house,
quickly and easily, even in a hard market!

Home | Privacy Policy | Legal Information | Tell A Friend

[Close]

JavaScript Popup Windows?

If you already know how to use JavaScript (at least a little), then just click here to go to the Popup Creator page.