POP-UP NEW WINDOW

NOTE! - Page Builder users should see my HTML ADDING in the menu at top left in my Page Builder Help Pages to learn how to add HTML code to their Page Builder made pages.

This code for a pop-up window is special as it allows you to control the attributes of the window such as size, positions, re-sizable, and whether the toolbar is present. If you don't need all this control over the new window, then please see TARGET CODE.

There are three methods you can use when controlling the new window's attributes:

All of these use the same javascript but they use different methods to get to the pop-up window.

For A Pop-Up Window that doesn't have a toolbar see this code.

FORM
Here is an example of using a form button to pop-up a new window:

Click on the Pop-UP New Window button and see a new, small window appear. The page you put in the window can be any page or graphic you wish. To close the window, click on the "X" in the upper right hand corner.

The code for a form button to open a new window is below. You can click on the SELECT CODE TO COPY AND PASTE button to highlight the code and then copy and paste the code directly into your file.

<form>
<input type="button" Value="Pop-Up Window Here"
ONCLICK="window.open('popupnewwindow.htm', 'Sample',
'toolbar=yes,location=yes,directories=no,status=no,menubar=yes,
scrollbars=yes,resizable=yes,copyhistory=yes,width=250,height=260,left=80,top=40')">
</form>

If you use this code, only change these items:

To close any pop-up window you can let the surfer click on the X in the upper right hand corner of the new window or you can prove them with a BUTTON with this code:

<form><input type="button" value="Close This Window" onClick="self.close()"></form>

To pop-up a graphic all you change is the name of the file in the code, e.g from an HTML file, e.g. popupnewwindow.htm, to a graphic file, e.g.speedy.gif, as I have done for this pop-up:

One Caution: I have found that the pop-up window dimensions must be increased by from 30-40 pixels to eliminate scroll bars, e.g. the cat image is actually 320X240 but the pop-up window is set to 360X270. You will note that I have changed the resizable to no so that the window can not be resized.

LINK

The LINK method requires that you use a Javascript function. Here is the code and please note that it can be used to pop-up any URL or graphic.

<HTML>
<HEAD>
<script LANGUAGE="JavaScript">
function winopen(url,ht,wt,lt,tp) {
window.open(url,"","height="+ht+",width="+wt+",left="+lt+",top="+tp+",scrollbars=yes,resizable=yes");
}
</script>
</HEAD>
<BODY>
<-- A TEXT LINK -->
<a href="javascript:winopen('popupnewwindow.htm',200,200,200,200)">Open New
Window</a>

<-- A GRAPHIC LINK -->
<a href="javascript:winopen('popupnewwindow.htm',200,200,200,200)">Open New
Window</a>
</BODY>
</HTML>

The parameters for the javascript function, winopen, are:

If you are copying and pasting the code be sure that the code:

window.open(url,"","height="+ht+",width="+wt+",left="+lt+",top="+tp+",scrollbars=yes,resizable=yes");

as shown above, is ALL ON ONE LINE, i.e. there are no carriage returns within this code as this will cause the code to not work.

This is especially true for Page Builder users.

In the above code you will replace popupnewwindow.htm with the name of your page that will pop-up, e.g. mygraphics.html or the name of a graphic file, e.g. mycat.jpg.

Test the above for a html page! or a graphic!

Page Builder Users
You will need to put the <SCRIPT> .... </SCRIPT> code in using the Advanced Page Properties HEAD SCRIPT. Please see Advanced Page Properties for details.

I recommend leaving the function name as winopen. You should change the file name in the link to whatever page you wish to have pop up. Be sure that if the page is not on your site to use the full url, e.g. http://www.geocities.com. The name of the file you wish to appear in the new window,which can be a graphic file, e.g. myphoto.jpg. You can change the height, width, top and left to values that suit your needs. The new window will automatically have SCROLL BARS if needed or you can make the window have no scroll bars by setting scrolling=no. The new window will be resizable.

To use a graphic as the link just replace the Open New Window in the code with the code for a graphic, e.g. <img src="graphic-file-name">

ONLOAD

To have a pop-up window appear when the page loads you can use the same javascript as above for the link except you put the call to the javascript function in the <BODY> tag like this:

<body background="helpbg.gif" bgcolor="#FFFFFF" text="#000000" link="#0066FF" alink="#FFFF00" vlink="#CC0000" onLoad="winopen('popupnewwindow.htm',200,300,200,200)">

If the page is not in your current directory then you would use sub-directory/filename. If the page is on some other site you would use http://www.domainname.com/filename.

NO TOOLBAR

If you would like to pop-up a new window that doesn't have the toolbar, i.e.

you can try the code by CLICKING HERE!. Use the code below.

<HTML>
<HEAD>
<script LANGUAGE="JavaScript">
function notoolbar(url,ht,wt,lt,tp) {
window.open(url,"","height="+ht+",width="+wt+",left="+lt+",top="+tp+",scrollbars=yes,resizable=yes,toolbar=no");
}
</script>
</HEAD>
<BODY>
<a href="javascript:notoolbar('popupnewwindow.htm',200,200,200,200)">Open New Window</a>
</BODY>
</HTML>

If you are copying and pasting the code be sure that the code:

window.open(url,"","height="+ht+",width="+wt+",left="+lt+",top="+tp+",scrollbars=yes,resizable=yes,toolbar=no");

as shown above, is ALL ON ONE LINE, i.e. there are no carriage returns within this code as this will cause the code to not work.

This is especially true for Page Builder users.

The parameters for the javascript function, notoolbar, are: