Export (0) Print
Expand All

Using the Popup Object

Note  As of December 2011, this topic has been archived and is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.

The popup object enables you to create window objects that take full advantage of Dynamic HTML (DHTML). Click the Show Me button to see some of the exciting things that can be done using a popup.

Click to view sample.

This article first outlines the important features of the popup object. Several of these features and the basic syntax to use with the popup object will then be demonstrated. Alternatives to the popup will be explored in the last section.

Features

Below is a list of important features of the popup object. Many of these features make the popup object useful for creating custom menus and displaying quick reference information.

  • Unlike most window types, popup object does not have border chrome around it. The following graphic is a window with border chrome.

    Window With Border Chrome

  • A popup object always closes when the user clicks away from it or when another popup object is opened.
  • The popup object never has focus when it is displayed so processes continue to run in the parent window.
  • DHTML that populates the popup object can be stored inside the parent document or in another document.
  • The popup object does not support text boxes of any kind.
  • No elements inside of the popup object can be selected.
  • No navigation can occur inside the popup object itself (clicking a link will launch navigation in the parent window or a new instance of the browser).
  • Once displayed, the popup object cannot be moved by the user.
  • The popup object cannot be resized by the user.

Syntax and Focus

The popup object is created by the createPopup method, displayed by the show method, and closed by the hide method. The following example shows how to use the basic syntax. It also shows how a user can type inside a text box while a popup is displayed because the popup object never has focus.

Note  For simplicity, the code for formatting has been omitted from some of the examples in this article. To view all of the code, view the source code inside of the Show Me examples.



<HTML>
<HEAD>
<TITLE>Basic Popup Example</TITLE>
<SCRIPT LANGUAGE="JScript">
// Create the popup object. For predictable results, always create
// a global popup object.
var oPopup = window.createPopup();
function openPopup()
{
    // The popup object exposes the document object and its
    // properties.
    var oPopBody = oPopup.document.body;
    // The following HTML that populates the popup object with a string.
    oPopBody.innerHTML = "<DIV>This is a popup.</DIV>"
    // Parameters of the show method are in the following order: x-coordinate,
    // y-coordinate, width, height, and the element to which the x,y 
    // coordinates are relative. Note that this popup object is displayed
    // relative to the body of the document.
    oPopup.show(15, 150, 50, 50, document.body);
}
</SCRIPT>
</HEAD>
<BODY>

<TEXTAREA onclick="openPopup();" ROWS="6" COLS="30" WRAP STYLE="width:100%">
Click in here to open a popup object.</TEXTAREA>

</BODY>
</HTML>


Click to view sample.

Note  Because the popup object never takes focus, focus related events such as onfocus and onblur are not applicable to the popup object.

Popup Glossary Definitions

You can use the popup object when you want to display quick reference information in an unobtrusive manner. The popup object closes when the user clicks away from it so the user can click one popup object after another and then on the parent window without having to close numerous windows. This feature enables the popup object to act like a typical drop-down menu or a popup glossary definition.

The following example shows how to use the popup object to create glossary definitions.



<HTML>
<HEAD>
<TITLE>Popup Glossary Definition Sample</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function fnDef()
{
    if (event.srcElement.id == "brasshat")
        oPopup.document.body.innerHTML = oBrassHat.innerHTML;
    else if (event.srcElement.id == "entrechat")
        oPopup.document.body.innerHTML = oEntrechat.innerHTML;     
    var popupBody = oPopup.document.body;
    // The following popup object is used only to detect what height the 
    // displayed popup object should be using the scrollHeight property. 
    // This is important because the size of the popup object varies 
    // depending on the length of the definition text. This first 
    // popup object is not seen by the user.
    oPopup.show(0, 0, 300, 0);
    var realHeight = popupBody.scrollHeight;
    // Hides the dimension detector popup object.
    oPopup.hide();
    // Shows the actual popup object with correct height.
    oPopup.show(0, 15, 300, realHeight, event.srcElement);
}
</SCRIPT>
</HEAD>
<BODY>

The <SPAN ID="brasshat" onclick="fnDef();">brass hat</SPAN> 
was impressed by the grace of the dancer's 
<SPAN ID="entrechat" onclick="fnDef();">entrechat</SPAN>.

<!-- Nested DIVS inside this hidden DIV store the code that populates the
popup object. -->
<DIV STYLE="display:none;">
    <DIV ID="oBrassHat">
        <DIV>
            <B>brass hat:</B><BR>
            A high-ranking official.
        </DIV>
    </DIV>
    <DIV ID="oEntrechat">
        <DIV>
            <B>entrechat:</B><BR>
            A jump in ballet during which the dancer crosses the legs a 
            number of times, alternatively back and forth. 
        </DIV>
    </DIV>
</DIV>
</BODY>
</HTML>


Click to view sample.

Storing Popup Code in a Separate Document

In the preceding example, the HTML that populates the popup object is stored in a hidden div inside the document itself. The popup object can also access code from another document. You can treat this separate document as a normal HTML document. This is advantageous when you use imported style sheets, style blocks, and script tags for reasons including that the popup object is separate from the parent window and elements like style blocks in the parent are not available to the popup object.

The following example shows how to populate a popup object by accessing DHTML from another document using the default download behavior. It also demonstrates how popup objects are useful for menu applications. With a popup object, it is easy to click one menu-activating element after another. The previous menu automatically closes when the next one opens because only one popup object can be open at a time.



<HTML>
<HEAD>
<TITLE>Popup Parent</TITLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<!-- The DOWNLOAD element is user-defined and used only to associate the 
download default behavior with an identifier that is then associated with the 
startDownload method later in the script. -->
<DOWNLOAD ID=dwn STYLE="behavior:url(#default#download)" />

<SCRIPT>
    // Code file contents are passed to this function after it is downloaded.
    function onDone(src){
	    oPopup.document.write(src); 
    }
    function showPopup(){	
	    oPopup.show(0, 0, 220, 30, editbutton);
    }
    
    var oPopup = window.createPopup();
    // startDownload is a member of the download default behavior.
    // The callback function pointer (second parameter) specifies a 
    // function. When a file downloads successfully, the file contents
    // are passed as the parameter to onDone().
    dwn.startDownload("PopupHTML.htm",onDone);	
</SCRIPT>

My Favorite Weather is:
<INPUT ID="inputid" TYPE="text" VALUE="Rain">
<INPUT ID="editbutton" TYPE="Button" onclick="showPopup();" VALUE="Edit">
</BODY>
</HTML>


The following document contains the DHTML that populates the popup window.



<HTML>
<HEAD>
<TITLE>Popup Window</TITLE>
<SCRIPT LANGUAGE="JScript" >
// "inputid" identifies the text box in the parent window where popup
// input is displayed. The parent window is accessed from the popup by 
// the "parent" property.	
function clickPopup(){
	if (event.srcElement.tagName == "IMG"){
		parent.inputid.innerText = event.srcElement.id;
		parent.oPopup.hide();
    }
}
</SCRIPT>
</HEAD>
<BODY onclick="clickPopup();" style="border:solid 1; 
background-color:darkblue; overflow:hidden; margin-top:2px; margin-right:2px;
margin-left: 2px; margin-bottom:2px">
<IMG src="Sunny.gif" id="Sunny">
<IMG src="Partly Cloudy.gif" id="Partly Cloudy">
<IMG src="Mostly Cloudy.gif" id="Mostly Cloudy">
<IMG src="Cloudy.gif" id="Cloudy">
<IMG src="Rain.gif" id="Rain">
<IMG src="Snow.gif" id="Snow">
</BODY>
</HTML>


Click to view sample.

Popup Navigation Menus

Another application of the popup object is custom browser navigation menus that render a URL in the parent window. The following example shows how to make custom navigation menus (activated by right-clicking the document) using the popup object.



<HTML>
<HEAD>
<TITLE>Popup Custom Navigation Menu Sample</TITLE>
<SCRIPT LANGUAGE="JScript">
var oPopup = window.createPopup();
function contextMenu()
{
    // The variables "lefter" and "topper" store the X and Y coordinates
    // to use as parameter values for the following show method. In this
    // way, the popup displays near the location the user clicks. 
    var lefter = event.offsetX+10;
    var topper = event.offsetY+10;
    oPopup.document.body.innerHTML = oContextHTML.innerHTML; 
    oPopup.show(lefter, topper, 200, 65, document.body);
}
</SCRIPT>
</HEAD>
<BODY oncontextmenu="contextMenu(); return false;">
<h1>Creating Custom Context Menus with the Popup Object</h1>
Right-click anywhere on the document to see a customized popup navigation 
menu.
<DIV ID="oContextHTML" STYLE="display:none;">
    <DIV onmouseover="this.style.background='gold';" 
         onmouseout="this.style.background='#e4e4e4';">
    <SPAN onclick="parent.location.href='http://msdn.microsoft.com'">
    MSDN Web Workshop</SPAN> 
    </DIV>
    <DIV onmouseover="this.style.background='gold'" 
         onmouseout="this.style.background='#e4e4e4'" 
    <SPAN onclick="parent.location.href='http://search.microsoft.com'">
    Search</SPAN> 
    </DIV>
</DIV>
</BODY>
</HTML>


Click to view sample.

Alternatives to the Popup Object

ToolTips and dialog boxes are similar to popup objects and can be used for similar applications. However, there are a number of key differences which are discussed below.

Popup Object vs. Dialog Boxes

The most important differences between popup objects and dialog boxes are the following:

  • Dialog boxes must be addressed directly in some way in order to close them. The popup object, on the other hand, closes by simply clicking away from it. This is why the popup object is often used to create menus and glossary definitions as illustrated earlier in this article.
  • Dialog boxes must have border chrome around them unless they are being used in a trusted application such as an HTML Application (HTA). The popup object does not have this requirement giving you more control of its appearance. This is especially useful when creating custom menus and message boxes.
  • Dialog boxes always take focus when they are first opened. If you want processes to continue to run in the parent window, the popup object can be used.
  • Dialog boxes support all types of form elements including text boxes. The popup object does not support text boxes and is not meant to be used to gather sensitive information from the user.

For more information about dialog boxes and the many uses for dialog boxes, see The Importance of Good Dialog.

Popup Object vs. ToolTips

You can create applications similar to the glossary definition example earlier in this article using ToolTips created by the TITLE attribute or the ToolTip behavior. However, a ToolTip does not support full DHTML and does not have the flexibility of popup objects. ToolTips also close when the pointer moves away from the element that contains the ToolTip or after a time period if the cursor does not keep moving over the element. On the other hand, ToolTips are often simpler to use and can require less code. Also noteworthy is that ToolTips will automatically close when a popup is opened.

Related topics

The Importance of Good Dialog
Working with Windows, Frames, and Dialog Boxes
popup
TITLE
ToolTip Behavior
showModalDialog
showModelessDialog

 

 

Show:
© 2014 Microsoft