Creating Popups | Inside JavaScript

Popups are windows typically used for dialog boxes, message boxes, tooltips, and other temporary windows ; and in the Internet Explorer, you can use the createPopup method to create a popup:

 window.createPopup([  arguments  ])

The optional arguments argument actually is ignored currently and is reserved for future use only. This method returns the popup window object itself. You can use two methods with popup windows, show and hide . The show method shows the popup:

 popup.show(  iX  ,  iY  ,  iWidth  ,  iHeight  [,  element  ])

Here are the arguments for this method:

iX . Integer that specifies the x coordinate of the popup window, in pixels.
iY . Integer that specifies the y coordinate of the popup window, in pixels.
iWidth . Integer that specifies the width of the popup window, in pixels.
iHeight . Integer that specifies the height of the popup window, in pixels.
element . Object that specifies the element to which the x,y coordinates are relative. If none is given, the x,y coordinates are relative to the screen, where (0,0) is the upper-left corner.

The hide method just hides the popup, and is called without arguments: popup.hide() .

Here's an example that displays a tooltip using a popup window when the user clicks a button:

(Listing 08-03.html on the web site)

 <HTML>      <HEAD>          <TITLE>Popup Example</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             var popup = window.createPopup()              function ButtonClick()              {  popup.document.body.style.backgroundColor = "lightyellow"   popup.document.body.style.border = "solid black 1px"   popup.document.body.innerHTML = "This is a popup! Click outside the popup  to close it."   popup.show(100, 100, 180, 40, document.body)  }              // -->          </SCRIPT>      </HEAD>      <BODY>          <BUTTON ONCLICK="ButtonClick()">Click Me!</BUTTON>      </BODY>  </HTML>

You can see the results in Figure 8.6.

Figure 8.6. Displaying a popup.

graphics/08fig06.gif