Modal and Modeless Dialog Boxes

Passing Objects to the Dialog Box

A more powerful way to pass information between the caller and the callee is through an object. You can pass properties from the caller to callee and back from the callee to the caller. You can also define the object's methods within the caller and use them within the callee. In fact, you can pass the caller window object to the callee. in this way, you ensure the callee has access to the caller's variables and functions.

Let's see an example. Our caller invokes the callee to prompt the user for his or her favorite color. The color is communicated back to the caller via the caller's update() function. First, play around with the scripts. Here is the caller:

<HTML>
<HEAD>
<TITLE>DialogArguments Example</TITLE>
<SCRIPT>
var sColor="";

function callDialog() {
 showModelessDialog("callee.html",window,"status:false;
  dialogWidth:300px;dialogHeight:150px");
}

function update()
{
  oColor.innerText = sColor;
}
</SCRIPT>
</HEAD>
<BODY>
<P>Enter your favorite color: <SPAN ID="oColor"
STYLE="color:red;font-size:24">Yellow</SPAN></P>
<INPUT TYPE="button" VALUE="Display Modeless Dialog"
  onclick="callDialog()">
</BODY>
</HTML>

The favorite color field, oColor, is initialized to Yellow. When you click the Display Modeless Dialog button, the function callDialog() kicks in and calls showModelessDialog(). Notice the function call's second parameter: window. We pass the user's favorite color as the window object property.