Working with the Popup Object

The pop-up window is a special type of overlapping window object that is used for dialog boxes, message boxes, and other temporary windows. Pop-up windows are very useful for creating menus or advanced tool tip text because they can be shown and hidden at will. That they can be customized and moved around on a Web page makes them ideal for displaying tips, notes, or context menus. The only limitation inherent to popup objects is that they must always stay on the document for which they were created. In other words, they cannot exist outside of their parent windows.

Popup Properties

There are two properties that are part of the Popup object's definition.

document. A reference to the document contained on this Popup object.
isOpen. A boolean value representing whether the Popup is currently open or not.

Popup Methods

The following two methods are part of the Popup object's definition.

hide(). Hides a visible Popup object.
show (xPos, yPos, width, height, obj). Reveals a hidden Popup object in the specified x,y position and the specified width and height. If the obj parameter is included, it is the object to which the position is relative. If the obj parameter is not included, the Popup will be positioned relative to the desktop.

You can create a Popup object by using the built-in method createPopup() in the window class. Here is the syntax for the createPopup() method:

var myPopup = window.createPopup();

This statement will return a Popup object that you can then use like any other window. The Popup's document object will initially be blank, but you can add HTML to it using the document.body.innerHTML property. Following is an example of doing just that:

<html>
  <head>
    <title>
      JavaScript Professional Projects Working with Popup Windows 
    </title>

    <script language="JavaScript"> 
    <!--
       var thePopup = window.createPopup();

       with( thePopup.document.body ) 
       {
         bgColor = "lightgreen";

         innerHTML = "<center>" +
                     "<font size=6>JavaScript Professional " +
                                "Projects</font><br>"+
                     "<font size=4>Chapter 9: A Popup Window</font>" +
                     "</center>";
       }
     -->
      </script>

    </head>

    <body>

       <center>
         <font size=6>JavaScript Professional Projects</font><br> 
         <font size=4>Chapter 9: Working with Popup Windows</font>
       </center>

       <br><br>
       <br><br>

       <p>Click this button to show the popup window:&nbsp; </p>
       <form> 
          <input type="button" value="Show"
             onClick="JavaScript: thePopup.show( 150, 150, 450, 350 );"> 
       </form>
  
       <p>Click the button to hide the popup window:</p>
       <form>
          <input type="button" value="Hide"
            onClick="JavaScript: thePopup.hide();"> 
       </form>

    </body>
</html>

This example creates a pop-up window when a button is pressed and hides it when another button is pressed.