Javascript: operation mode and non-Modal Dialog Box

As we know, a dialog box is generally divided into two types: modal and modeless ). A Modal Dialog Box refers to a dialog box in which the user's mouse focus or input cursor will remain on it unless effective closing means are adopted. The non-modal dialog box does not force this feature. You can switch between the current dialog box and other windows. This article describes how to use the Javascript language to create these two types of dialog boxes, control their size and position, change their appearance, and transfer data between the dialog boxes.

In all the routines in this article, two HTML pages are involved in the hierarchy. The first page is called the caller page, and the second page is called the callee page. That is, runCodeCreate and generate the callee page.

1. Create modal and non-Modal Dialog Boxes

First, let's take an example to quickly understand what is modal and non-modal. In caller.htm, enter the following code:

<Input type = "button" value = "create Modal Dialog Box" onclick = "fnopenmodal ()">

<Br>

<Input type = "button" value = "create non-Modal Dialog Box" onclick = "fnopenmodeless ()">

<Script. Language = "JavaScript">

Function fnopenmodal (){

Window. showmodaldialog ("callee.htm ")

}

Function fnopenmodeless (){

Window. showmodelessdialog ("callee.htm ")

}

</SCRIPT>

. As you can see, apart from closing this new window, we cannot set other windows as "current activity" in any case. This is always the window type in the active status, that is, the modal type. Close this mode dialog box and go back to the caller.htmpage. Click "create non-mode dialog box" to display a dialog box containing the callee.htm page. This is different. You can move the mouse to another place to make another window "active". This is the concept of non-modal mode.

Next, let's look at the syntax for creating a modal dialog box and a non-modal dialog box:

Create mode dialog box:

Vreturnvalue = Window. showmodaldialog (Surl [, vfreeargument] [, sornaments]);

Create non-modal dialog box:

Vreturnvalue = Window. showmodelessdialog (Surl [, vfreeargument] [, sornaments]);

From the above syntax, we know that apart from the differences in names, the parameter types and meanings are the same. The meanings of parameters are as follows:

· Vreturnvalue: For showmodaldialog (), it indicates the returnvalue attribute value set in the window of the opened dialog box. For showmodelessdialog (), it indicates the new window object.

· Vfreeargument: this parameter can be used to pass some type of data to the open dialog box. The data can be a value, String, array, or object type. When referencing this value in a new window, you can use the dialogarguments attribute of the newly created window object.

· Sornaments: use this parameter to specify the appearance of the new window. There are many types of window attributes that can be selected. When there are multiple control requirements, the related content is connected with a string, separated by semicolons. The following are optional attribute types:

O dialogheight: sheight

O dialogleft: sxpos

O dialogtop: sypos

O dialogwidth: swidth

O center: (Yes | no | 1 | 0 | on | off)

O dialoghide: (Yes | no | 1 | 0 | on | off)

O edge: (sunken | raised)

O help: (Yes | no | 1 | 0 | on | off)

O resizable: (Yes | no | 1 | 0 | on | off)

O scroll: (Yes | no | 1 | 0 | on | off)

O status: (Yes | no | 1 | 0 | on | off)

In addition to the above attributes, we can also add richer CSS control. Here we will explain in detail how to apply these attributes.

2. Control the dialog box size and position

The size and position of the control dialog box involve five aspects: dialogheight, dialogwidth, dialogleft, and dialogtop) and whether to center the dialog box window ). Because the default measurement units processed by different versions of Internet Explorer are not the same, it is best to set the unit at the same time when the height and width are specified. The unit types include cm, mm, in, PT, PC, and PX. Note: The minimum height is 100px.

The following code opens a dialog box with a height of PX and a width of PX:

Required parameter showmodaldialog('callee.htm', '', 'dialogheight: 200px; dialogwidth: 800px ');

We noticed that the new window is centered on the desktop, which is the default value of the center attribute. The options of center include yes, no, 1, 0, on, and off. Run the following code to check the position of the new window after the center property is closed:

Required parameter showmodaldialog('callee.htm', '', 'dialogheight: 200px; dialogwidth: 800px; center: no ');

We can see that the new window is opened in the upper left corner of the desktop next to the user. Of course, we can use the dialogleft and dialogtop attributes to precisely define the opening position of the new window. The following code opens a new window at X position 300px and Y position 500px relative to the top left corner of the desktop:

Required parameter showmodaldialog('callee.htm ', '', 'dialogheight: 200px; dialogwidth: 800px; dialogleft: 300;Best Blog T | S # f3q '[ Dialogtop: 500 ')

Note: even if the center attribute is specified, if the dialogleft and dialogtop attribute values are set at the same time, the window position follows the latter. Try the following code:

Required parameter showmodaldialog('callee.htm ', '', 'dialogheight: 200px; dialogwidth: 800px; dialogleft: 300; Dialogtop: 500; center: Yes ')

3. Change the dialog box appearance

The Appearance Control of the dialog box includes edge, scroll, help, and status bar) and whether the window size (resizable) can be changed. By default, the size of the new window is unchangeable, the edge style is raised, a context Association prompt icon is displayed in the upper right corner of the new window, and a scroll bar exists. For example:

The available values of edge are sunken and raised. The options of status, help, resizeable, and scroll are yes, no, 1, 0, on, and off, its meaning is clear at a glance.

The following code removes the context Association prompt icon, does not display the status bar, and the window edge style is concave:

Showmodelessdialog ("callee.htm", "", "status: 0; help: 0; edge: sunken ");

After execution, the figure is shown as follows:

4. transfer data from the caller page to the callee page

The above describes the syntax for creating modal and non-modal windows and how to control the size, position, and appearance of the new windows. Next, we will study more practical functions in practical application: how to transfer data from the caller page to the callee page.

The data transmitted from the caller page to the callee page is divided into three types: Passing values, passing array references, and passing objects, all of which are implemented through the 2nd parameters of showmodaldialog () and showmodelessdialog.

(1) transfer value type data

Enter the following code on the caller.htm page:

<Input type = "button" value = "create Modal Dialog Box" onclick = "fnopenmodal ()">

<Br>

<Input type = "button" value = "create non-Modal Dialog Box" onclick = "fnopenmodeless ()">

<Script. Language = "JavaScript">

<! --

Function fnopenmodal (){

Window. showmodaldialog ("callee.htm", "opens a new modal window ")

}

Function fnopenmodeless (){

Window. showmodelessdialog ("callee.htm", "opens a new non-modal window ")

}

// -->

</SCRIPT>

Enter the following code on the callee.htm page:

<Script. Language = "JavaScript">

<! --

Alert (dialogarguments );

// -->

</SCRIPT>

Open caller.htm in the browser and click any button. The following prompt box is displayed:

Then a new window appears. In this case, the parameter dialogarguments of the window object in callee.htmpage will be applied to "opening a new modal window" or "opening a new non-modal window" on the caller.htm page ". If you open callee.htm directly, an error will be prompted.

(2) Transmit array reference data

In the first transmission of value-added data, only caller.htm page data can be read on callee.htmpage. When the callback modifies the content transmitted on the caller.htm page, you must use the transfer method of the array reference type.

First, enter the following code on the caller.htm page:

<Input type = "button" value = "create Modal Dialog Box" onclick = "fnopenmodal ()">

<Br>

<Input type = "button" value = "create non-Modal Dialog Box" onclick = "fnopenmodeless ()">

<Script. Language = "JavaScript">

<! --

VaR A = new array;

A [0] = "first ";

A [1] = "second ";

A [2] = "third ";

Function fnopenmodal (){

Window. showmodaldialog ("callee.htm",)

}

Function fnopenmodeless (){

Window. showmodelessdialog ("callee.htm",)

}

// -->

</SCRIPT>

Then enter the following code on the callee.htm page:

<Script. Language = "JavaScript">

<! --

A = dialogarguments;

Alert ();

A [0] = "fourth ";

// -->

</SCRIPT>

Open caller.htm in the browser and click any button. The following dialog box is displayed:

Close the dialog box and the new window, click a button again, and a dialog box appears:

From the running result, we can see that the address reference of A can be used in the caller.htmpage to modify the content of array a in callee.htm.

In callee.htm, you must first create a value for passing data: A = dialogarguments.

(3) passing object-type data

. Besides, we can define objects in caller.htmand use them in callee.htm. In addition, we can pass the caller.htm's window object to callee.htm. in this way, we can call caller.htm variables and functions in callee.htm.

Let's take a look at a practical example. Enter the following code in caller.htm:

<HTML>

<Head>

<Title> transfer object data </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>

Enter the following code in callee.htm:

<HTML>

<Head>

<Title> callee.html </title>

<SCRIPT>

Function getinfoandupdate (){

VaR callerwindowobj = dialogarguments;

Callerwindowobj. scolor = oentercolor. value;

Callerwindowobj. Update ();

}

Function cancel (){

VaR callerwindowobj = dialogarguments;

Callerwindowobj. scolor = "yellow ";

Callerwindowobj. Update ();

}

</SCRIPT>

</Head>

<Body>

Enter your favorite color: <input id = oentercolor> <br>

<Input value = "Apply" type = button onclick = "getinfoandupdate ();">

<Input value = "OK" type = button onclick = "getinfoandupdate (); window. Close ();">

<Input value = "cancel" type = button onclick = "cancel (); window. Close ();">

</Body>

</Html>

Open caller.htm in the browser and click "show Modal Dialog Box". A new dialog box is displayed:

Enter another color name in the dialog box. Click the “apply”button to execute the getinfoandupdate function in callee.htm:

Function getinfoandupdate (){

VaR callerwindowobj = dialogarguments;

Callerwindowobj. scolor = oentercolor. value;

Callerwindowobj. Update ();

}

Variables and functions in callback: Update () function update display information in callerwindowobj. scolor = callback.

As you can see, the ability to transmit data through objects is rich and powerful, and it is not complicated to use.

Vi. Closed speech

& Lt; table width = "100%" & gt;

the operation mode and non-modal dialog box in Javascript language are described in detail. I believe you have mastered a new technology for creating windows in HTML pages. In practical application, the modal dialog box is more practical and can be used when the visitor must read the relevant content. In addition, the object-based method is used to transmit data between windows, which is very powerful but not complex. It is a very useful technology.