[转]Using the Popup Object

mac2022-06-30 22

Using the Popup Object

Internet Development Index

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.

Show Me

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 Syntax and Focus Popup Glossary Definitions Storing Popup Code in a Separate Document Popup Navigation Menus Alternatives to the Popup Object Related Topics

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.

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.

Show Example

<HTML> <HEAD> <TITLE>Basic Popup Example</TITLE> <SCRIPT LANGUAGE="JScript"> var oPopup = window.createPopup(); function openPopup() { var oPopBody = oPopup.document.body; oPopBody.innerHTML = "<DIV>This is a popup.</DIV>" oPopup.show(15, 150, 50, 50, document.body); } </SCRIPT> </HEAD> <BODY> <TEXTAREA οnclick="openPopup();" ROWS="6" COLS="30" WRAP STYLE="width:100%"> Click in here to open a popup object.</TEXTAREA> </BODY> </HTML> Show Me 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.

Hide Example

<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; oPopup.show(0, 0, 300, 0); var realHeight = popupBody.scrollHeight; oPopup.hide(); oPopup.show(0, 15, 300, realHeight, event.srcElement); } </SCRIPT> </HEAD> <BODY> The <SPAN ID="brasshat" οnclick="fnDef();">brass hat</SPAN> was impressed by the grace of the dancer's <SPAN ID="entrechat" οnclick="fnDef();">entrechat</SPAN>.  <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> Show Me

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.

Hide Example

<HTML> <HEAD> <TITLE>Popup Parent</TITLE> </HEAD> <BODY BGCOLOR=lightyellow>  <DOWNLOAD ID=dwn STYLE="behavior:url(#default#download)" /> <SCRIPT> function onDone(src){ oPopup.document.write(src); } function showPopup(){ oPopup.show(0, 0, 220, 30, editbutton); } var oPopup = window.createPopup(); dwn.startDownload("PopupHTML.htm",onDone); </SCRIPT> My Favorite Weather is: <INPUT ID="inputid" TYPE="text" VALUE="Rain"> <INPUT ID="editbutton" TYPE="Button" οnclick="showPopup();" VALUE="Edit"> </BODY> </HTML>

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

Hide Example

<HTML> <HEAD> <TITLE>Popup Window</TITLE> <SCRIPT LANGUAGE="JScript" > function clickPopup(){ if (event.srcElement.tagName == "IMG"){ parent.inputid.innerText = event.srcElement.id; parent.oPopup.hide(); } } </SCRIPT> </HEAD> <BODY οnclick="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> Show Me

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.

Hide Example

<HTML> <HEAD> <TITLE>Popup Custom Navigation Menu Sample</TITLE> <SCRIPT LANGUAGE="JScript"> var oPopup = window.createPopup(); function contextMenu() { 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 οncοntextmenu="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 οnmοuseοver="this.style.background='gold';" οnmοuseοut="this.style.background='#e4e4e4';"> <SPAN οnclick="parent.location.href='http://msdn.microsoft.com'"> MSDN Web Workshop</SPAN> </DIV> <DIV οnmοuseοver="this.style.background='gold'" οnmοuseοut="this.style.background='#e4e4e4'" <SPAN οnclick="parent.location.href='http://search.microsoft.com'"> Search</SPAN> </DIV> </DIV> </BODY> </HTML> Show Me

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.