Previous examples using the iSupport form have highlighted the iSupport form itself, or aspects of the page layout. In this example, we are focusing on the footer, seen below in white text on blue background.

The first two links in the footer are simple HTML links (which happen to be relative links, so in this HTML code copied from the Cleveland Clinic site, they link to the home of the Instruct server, and to a non-existing page.)

The "Disclaimer" and "Privacy Statement" links are the ones we are interested in. Both of these links use JavaScript to open new windows. They use the JavaScript window.open method rather than a simple hyperlink target attribute so that they can:

Here's how these links work:
  1. The hyperlink destination calls a JavaScript function rather than a direct page reference Since the hyperlink destination (the href parameter), unlike event parameters, normally does not contain JavaScript code, the href parameter value uses the JavaScript keyword, like this: <a href="JavaScript:disclaimer();">
  2. In this example, each hyperlink has its own JavaScript function, without parameters. This could just as easily be done with one parameterized JavaScript function (as illustrated in another example below).
  3. Each function invokes the built-in method window.open to open a window. The window.open method takes up to 4 parameters (though it is often expressed with only three):
    1. The destination URL, e.g. "http://www.xx.com/path/page.htm", or, in the Disclaimer function, /home/disclaimerpopup.htm.
    2. The target window name. As with the hyperlink target attribute, the value of "_blank" could be used to assure that a new window is always opened, but in this case, a target window name of "Disclaimer" is specified.
    3. A list of window attributes. A comprehensive list of attributes is shown in the w3schools site. The attributes specified in this example include:
      • toolbar=no - omit the main browser window toolbar,
      • location=no - omit the address toolbar,
      • resizeable=no - don't allow the user to resize the window (please note that it is generally best to allow the user to resize the window, in case the destination page turns out to be larger or the user sets the text to a larger font than the author of the source page expected.)
      • width=500,height=300 - specify the height and width of the window, in pixels.
    4. A parameter (not used or explained here) that affects the browser history.

Here's the HTML & Javascript code for the footer (omitting styling):

<script type="text/javascript" language="JavaScript">
function Disclaimer() {
	// Invoke window.open to open the disclaimer in a 500x300 window
	hist_window = window.open('http://www.clevelandclinic.org/home/popupdisclaimer.htm', 
                 'Disclaimer',                 
                 'toolbar=no,location=no,scrollbars=yes,resizeable=no,width=500,height=300');
}
function PrivacyStatement() {  
	// Invoke window.open to open the Privacy Statement in a 500x650 window
	hist_window = window.open('http://www.clevelandclinic.org/home/popupprivacy.htm',
              'PrivacyStatement',
              'toolbar=no,location=no,scrollbars=yes,resizeable=no,width=500,height=650');
}
</script>
<div class="footer">
  <a href="/" target="_top">Cleveland Clinic Home</a>  | 
  <a href="/contact/">Contact s</a>  | 
  <a href="javascript:Disclaimer();">Disclaimer</a>  | 
  <a href="javascript:PrivacyStatement();">Privacy Statement</a>  | 
  &copy; Cleveland Clinic 2006
</div>
And the footer looks like this: With either the Disclaimer link or the Privacy Statement link, you'll see that
  1. When you hover over the link, the destination URL shown in the browser status bar shows the full "unfriendly" value of the HREF attribute.
  2. The link causes a smaller window to pop-up over this window,
  3. the pop-up window's URL is shown in the blue title bar even though the address bar is suppressed (this is a security feature of newer web browsers), and
  4. the pop-up window contains a "close this window" link or button whose action is "javascript:window.close();".

An alternate approach: Two pop-up window hyperlinks with one parameterized JavaScript function

<script type="text/javascript" language="JavaScript">

function openNewWindow(url,windowName,width,height) {
	// use window.open to open target link, with the URL, Window Name, Width, and Height passed as parameters.
	// The URL and Window Name are used as the first two parameters to window.open
	// The width and height are placed into a window parameter string.
	hist_window = window.open(url, 
                 windowName,                 
                 'toolbar=no,location=no,scrollbars=yes,resizeable=no,width='+width+',height='+height);
}
</script>
<div class="footer2">
  <a href="/" target="_top">Cleveland Clinic Home</a>  | 
  <a href="/contact/">Contact s</a>  | 
  <a href="popupdisclaimer.htm"
          onclick="openNewWindow('http://www.clevelandclinic.org/home/popupdisclaimer.htm',
  		                  'Disclaimer',
  		                  500,
  		                  300);
  		            return false;">Privacy Statement</a>  | 
  <a href="popupprivacy.htm" 
           onclick="openNewWindow('http://www.clevelandclinic.org/home/popupprivacy.htm',
  		                  'Privacy',
  		                  500,
  		                  650);
  		            return false;">Privacy Statement</a>  | 
  &copy; Cleveland Clinic 2006
</div>
This footer looks just like the previous one: This footer behaves like the previous one, except that
  1. In this example, the Disclaimer and Privacy hyperlink href parameters shown in the status bar are "dummy" values.
  2. The actual action of the hyperlink comes from its onclick event, not from its href attribute. Note that the JavaScript function returns the boolean value 'false', and the return statement in the onclick event returns that 'false' value to the tag. As a result of this 'false' value, the hyperlink is NOT followed.