Home > Developer > JavaScript
The showModalDialog () method provided by IE is a very useful Web application function. Although the General website application is not very common, once it involves enterprise application-level Web development, it is very useful. Now, let me use a simple and easy-to-understand example to illustrate:
This application requires two web files:
1. Parent window (that is, the page used to control the pop-up window)
ShowModalDialog.html
<Html>
<Head>
<Title> showModalDialog </title>
<Script language = "JavaScript">
<! --
// AInfo will be passed out by showModalDialog as an array object
// You can also use var oMyobject = new Object ();
// Define an object by oMyobject. firstProperty = value; oMyobject. lastProperty = value)
Var aInfo = new Array (3 );
AInfo [0] = "aaaaaaaaaaa ";
AInfo [1] = "bbbbbbbbbbb ";
AInfo [2] = "ccccccccccc ";
Var url = "dialog.html ";
Var sFeatures = "dialogWidth = 500px; dialogHeight = 500px; dialogLeft = 0; dialogTop = 0 ;";
/* Optional parameters of sFeatures:
* DialogWidth: the width of the pop-up window;
* DialogHeight: the height of the pop-up window;
* DialogLeft: left margin of the pop-up window
* DialogTop:
* Edge: sunken | raised
* Center: yes | no | 1 | 0 | on | off
* DialogHide: yes | no | 1 | 0 | on | off
* Help: yes | no | 1 | 0 | on | off
* Resizable: yes | no | 1 | 0 | on | off
* Scroll: yes | no | 1 | 0 | on | off
* Status: yes | no | 1 | 0 | on | off
* Unadorned: yes | no | 1 | 0 | on | off
*/
Function showDialog (){
// A showModalDialog is displayed and the return value is obtained using returnValue.
Var returnValue = window. showModalDialog (url, aInfo, sFeatures );
If (returnValue! = Null ){
// For (var I = 0; I <returnValue. length; I ++ ){
// Document.all.info. innerHTML = returnValue [I] + "<br> ";
//}
// Output return value
Document.all.info. innerHTML = returnValue;
}
//
}
// -->
</Script>
</Head>
<Body>
<H3> <a href = "#" onclick = "showDialog ()"> open the Dialog window </a> <Div id = "info"> </div>
</Body>
</Html>
2. subwindow (the page to be popped up)
Dialog.html
<Html>
<Head>
<Title> Dialog </title>
</Head>
<Body>
<Script language = "JavaScript">
<! --
// Obtain the objects sent from the parent window (in this example, the "oInfo" array object in the parent page can also be used as the "window" object for operations on the parent page. In short, it can be of the object type .)
Var args = window. dialogArguments;
If (args! = Null ){
// Document. write (args );
For (var I = 0; I <args. length; I ++ ){
Document. writeln (args [I] + "" + (I + 1) * 10 );
}
} Else {
Document. writeln ("sorry, the parameter is blank ");
}
// Value returned to the parent window
Window. returnValue = "this is the value returned by the subwindow ";
// -->
</Script>
</Body>
</Html>
Now, run showmodaldialog.html to see the clues...
Through these work, I implemented the mutual transfer and processing of values in the parent and child pages. I think this is exactly the original intention of ms to design the showModalDialog () method. Of course, this example is too simple. However, my goal is to understand the execution mechanism of showModalDialog through it. In practical applications, we need to draw a line between the two. (
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
