How to make a Javascript Pop-up Window by Creating and Pressing a Button

4/03/998  - Improvement for refocusing the window on step 4 (just cut and paste the whole step)
3/22/1998

In order to have a pop up window appear when you press a button like this:

You need to do the steps below.

Steps:

1.  In your frontpage editor, position the cursor to where you want to insert the button.
2.  Click on the HTML tab on the lower left corner.  This will show you your web page in text mode.
3.  At the cursor (or the position where you want to put the button) paste the text below:

<form>
<p><input type="button" value="Instruction Page" onClick="pop_up()"></p>
</form>

You can change the button text by changing the value of "Instruction Page" to something else such as "Hints on Using this Page".

Note that the name "pop_up()" is used below as the name of the function.   See Point 7 below for more on this.
4.  Next locate the </head> tag near the top of your web page (still in HTML text mode).   Then paste this text below just before the </head> tags.

<script language="javascript">
<!--
function pop_up()
{
  var theURL = "http://www.seasite.niu.edu/indonesian/Wolff/ch1/instruction.htm";
  var openWin =window.open(theURL,"Instruction","width=660,height=190,resizable=no,location=no,menubar=no,scrollbars=no,toolbar=no");

  //to set the focus to the window
  if(openWin.focus)
  {
    openWin.focus();
  }

  //To position the window at a particular screen location, delete the double slashes from "//if(openWin..." to the "//}"
  //I am not certain if you want to do this, since if the user repositions the window to his or her liking,
  //clicking this button will reset the window position. 
  // if(openWin.moveTo)
  //  {
   // openWin.moveTo(100,200);
  //  }

  return;
}
//-->
</script>

Note: There are NO SPACES in the "http:..." line or inside the window.open(...) line.

Just in case you missed that, please...

NOTE: There must be NO SPACES WITHIN THE "http://..." or within the window.open(dictURL....);
5.  The next step is to change some of the values to suit your needs.  Most of the changes you need to do are in the text you pasted in step 4.  

Change the theURL value to the address of the page you want to display in the pop-up window.

Next change "Instruction" to whatever that you want.  This text will be displayed at the top bar of your pop-up window.  It apparently cannot contain any blanks.
You might use "Some_Instructions" (i.e. an underscore to connect words) if you need multiple words.

Set the width and height to reasonable values for this pop-up.  It should not cover more than half the screen, as a general rule.  You can assume that the viewable area of a screen is at least 620 wide and 400 high.

Set resizable to yes if you want the user to be able to change the size of the window. 

Set scrollbars to yes if the text is bigger than the size of the window - i.e. if it has more lines than the window will show.

Once you do that you can save your work and preview it.
6.  Once you preview it you can modify the width and height to suit your needs.  The other values such as location, menubar etc., can have either yes or no as their values.  You can experiment with them to see what effects they will cause.
7. Making Multiple Buttons on a Page:  You can repeat steps 3 - 5 to create and include additional buttons on a single page.  Keep the following in mind:
  • each button must have a <form>...</form> with a unique onClick="functionName()"
  • each button must have a separate <script ...> ... </script>. The function's name must match that in the corresponding <form> section and the URL of the page to display in the pop-up window must be correctly specfied.

That's all....