Make your own free website on Tripod.com

Pop-Up Windows

Click here for a Pop-Up window.

Here is how I did it:

<html>
<head>
<title>A Pop-Up Window Adventure</title>

<script language="JavaScript" type="text/javascript">
<!--
function jen_popUp(theURL,winName,features) { 
  window.open(theURL,winName,features);
}
//-->
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<a href="#" onClick="jen_popUp('hex.html','jenWin','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=500,height=200')">Pop-Up?</a>

</body>
</html>

href="#": I set the link to #, so the bottom page that you click on to access the pop-up window stays the same. You specify the address of the pop-up page inside the ('hex.html'...) part, as stated below. If you made your code say something like: <a href="somefile.html" onClick="jen_popUp('hex.html',......)>, then the page you click the link on would go to "somefile.html", and your pop-up page whoud display the "hex.html" page.
hex.html: This should be the address of the page you want in the pop-up window. It can be relative, like I have it, or a full address like http://www.google.com.
toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes: You can decide what elements you want the window to have here, by useing "yes" or "no". More on these elements in a moment.
width=500,height=200: This determines the size of the window, in pixels.

Here are elements to a typical web browser window:
toolbar where back / refresh /etc. buttons are.
location the address bar.
status Located in the lower left section of browser.
menubar (windows/unix only) where file / edit / etc is located.
scrollbar Usually located to the right.
resizable This feature allows you to change the size of the window, maximize or minimize.

Sometimes, you may want your pop-up window to occupy as much screen as possible, or as much screen as possible minus a few pixels. You would then make your link as such:

<a href="#" onClick="jen_popUp('hex.html','jenWin','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-10)+',left=0,top=0')">Pop-Up?</a>

(Note, there are only carriage returns because the screen ran out of room, the code for this really has no returns).

width='+(window.screen.availWidth-10)+': The window will be as many pixels wide as possible, minus 10.
height='+(window.screen.availHeight-10)+': The window will be as many pixels tall as possible, minus 10.
left=0,top=0: The window is 0 pixels on the X axis, and 0 pixels on the Y axis.

Need to learn about chromeless windows?

Main?