Adding a "Pop-Up" Window in the IRM

Added: 2/27/02, Modified on 9/23/2003
Article ID: KI0005
Version: 2.201 or higher is REQUIRED

Goal of IRM: Simple and Clean Look

One of the goals of the IRM is to keep the pages simple and clean.  Sometimes customers put a great deal of text on the IRM that results in a cluttered look.  It is possible to add links for "More Information" in many places.  For example, rather than show 10 paragraphs of a cancellation policy on a given page, a button can be added which says: "Click here to view the cancellation policy".

This implementation of a pop-up window allows the size, location and browser features to be altered.  The pop-up is displayed using an HTML link which calls a JavaScript function when clicked.  This all happens client-side or on the guest's browser.

To view a live example of the above "More" link, see the Resort Data Processing IRM Demo.

Programming a Pop-Up Window for the IRM

Location of Files

For the IRM, all the pages changed by customers should be in the UserText folder in the IRM.  The path on the IRM bridge is normally C:\InetPub\wwwRoot\IRM\UserText. All Pop-Up HTML pages should also reside in this folder since that makes accessing with links much easier.  If there will be many pictures used in these files, it would be wise to make a "Pictures" or "Images" sub-folder under the UserText folder.  All images can then be referred to as "Pictures/MyPictures.jpg" or "Images/MyImage.gif" in links on the page.

Steps to Cut & Paste JavaScript Code

On a user defined page where a link to a pop-up window is to be added, both the link to the pop-up HTML page and the following JavaScript function must be added:

<script language='JavaScript'>
<!--
 function PopUp(PopUpURL,MoveX,MoveY){
   var Features;
	//Turn on Features using '=1'.  Turn off Features using '=0'
	//location = URL Field Display
	//width & height in pixels
   Features = "status=1, scrollbars=1, resizable=1, menubar=0, location=0, toolbar=0, width=450, height=450";
	//To Replace the current window, make the window name (2nd parameter) the same.
	//If left as "", each link will have a new window.
   HelpWindow = window.open(PopUpURL, "", Features);
   HelpWindow.moveTo(MoveX,MoveY);
   HelpWindow.focus();
}
-->
</script>

1. Highlight the above JavaScript in the browser from the beginning "<script..." tag to the ending "</script>" tag.
2. With FrontPage, open the IRM's user defined HTML page that will have a link to a pop-up window.
3. FrontPage has three views of a page (Normal, HTML & Preview).  The code above can ONLY be pasted in Normal view, so click the "Normal" tab.

4. Place the cursor at the upper left of the page and right click.

5. If using FrontPage 2000, choose "Paste Special..." and then choose "Treat as HTML".  For FrontPage 2002, choose "Paste" and then click on the icon that appears after the pasted text.  A drop down will appear.  Choose "Treat as HTML" from that drop down.
6. Change the Features string to adjust the width and height of the window.  This will be the same for all links on this page.  Remember that a normal resolution of a computer screen is 800 wide by 600 high.  There are screens with higher resolution, but it is best to account for the largest number of computers.
7. Change the Features string to turn on/off the various browser sections.  A "=0" means off and a "=1" means on.  This will be the same for all links on this page.  The example above is the recommended setting.  The "location" feature is the drop down list where you can see or enter a web address on the browser.  It's best to turn to off so the customer does not attempt to leave the IRM.  In the above mode, the window is very clean and simple.

Steps to Add a Link to a Pop-Up

<a href="#PopUp1" name="PopUp1" onClick="PopUp('/IRM/UserText/YourPage.htm',20,20)">

This Text Shows

</a>

1. With the document open in FrontPage, add the tag above where you want a link to the pop-up window.

2. Edit the link as needed.
   
   The first item to change is where you see '/IRM/UserText/YourPage.htm' above.  This is the location and name of the HTML page that will be displayed from this link.  Note that this example assumes the page you are linking to is in the UserText folder of the IRM.  All pages should reside in the UserText folder in the IRM virtual web.  The single quotes around the full path and page name are critical.
   
   The two numbers, 20 and 20 place the pop-up window's upper left corner 20 pixels down and 20 pixels right of the top corner of the computer screen.  If these numbers are "0,0", the pop-up window will be in the very upper left of the computer screen.
   
   Next, change the text that will show on the page for the guest.  The example above has "This Text Shows" in that area.  Change this to make sense for the guest.

3. If you have multiple links per page, you must change the href= and name= parameters to make them unique for each link.  The second link on the page should be: href="#PopUp2" name="PopUp2".  The "PopUp2" for both the href and the name should be identical.  This keeps the calling page from scrolling to the top of the page when the link is clicked.

4. Save the page in FrontPage and test.

Steps to Add an Optional Close Button to a Pop-Up

In some cases it's nice to have a close button on the page to make it easy for the guest to close the pop-up window.  The pop-up window with have the "X" in the upper right as well, which will close the window, so the close button is optional.

1. Open the pop-up window HTML page in FrontPage

2. Highlight the following text, right click and choose Copy.
   
   <div align='center'>
   <input type="button" Value=" Close " onClick="javascript:top.window.close();">
   </div>
    

3. In the Normal view, place the cursor where you want the button.
4. If using FrontPage 2000, choose "Paste Special..." and then choose "Treat as HTML".  For FrontPage 2002, choose "Paste" and then click on the icon that appears after the pasted text.  A drop down will appear.  Choose "Treat as HTML" from that drop down.
5. At this point, the button should appear.

NOTE:  JavaScript is case sensitive and very picky about the syntax, so this process must be precisely done in order to work.  The easiest way is to cut and paste the code and HTML.  If typing this in manually, then be very careful to make this exact.

Sample Pop-Up Windows