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.
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the 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.
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>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the 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 on 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>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the 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>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the 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>
This feature requires Microsoft® Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the 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.