Of Stack

Use of the showModalDialog modal dialog and browser compatibility

  • 2020-03-30 01:20:40
  • OfStack

1. What is a ModalDialog?
ShowModalDialog is a method of the jswindow object, which, like window.open, opens a new page.
The difference is that when the showModalDialog opens a child window, the parent window cannot get focus.
You can set the value of window.returnvalue in a child window so that the parent window can get the returnValue.

2. An example
1) main window main.html,
2) open sub-html in the main window by means of showModalDialog
3) set the returnValue in the child window to be returned to the main window for use

. The main HTML 


<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionshowmodal()
{
varret=window.showModalDialog("sub.html?temp="+Math.random());
alert("subreturnvalueis"+ret);
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="opensub"name=button1onclick="showmodal();">
</BODY>
</HTML>

Sub. HTML 

<HTML>
<HEAD>
<METANAME="GENERATOR"Content="oscar999">
</HEAD>
<script>
functionreturnMain()
{
window.returnValue="returnfromsub";
window.close();
}
</script>
<BODY>
<INPUTid=button1type=buttonvalue="returnandclose"name=button1onclick="returnMain()">
</BODY>
</HTML>

Note: math.random () is used in the showModalDialog method in main.html to avoid caching.

3. Detailed use of showModalDialog
VReturnValue = window. ShowModalDialog (sURL vArguments [,] [sFeatures])
sURL
Required parameter, type: string. Specifies the URL of the document to be displayed in the dialog box.
vArguments
Optional parameter, type: variant. Used to pass parameters to the dialog box. There is no limit to the types of arguments you can pass, including arrays, etc. The dialog box gets the arguments passed in through window.dialogarguments.
sFeatures
Optional parameter, type: string. To describe the appearance of the dialog box, you can use one or more of the following, using the semicolon ";" Separated.
DialogHeight of dialogHeight is no less than 100px. The default unit of dialogHeight and dialogWidth in IE4 is em, while in IE5 is px. For convenience, when defining modal dialog, use px as unit.
DialogWidth: dialogWidth
DialogLeft: the distance to the left of the desktop.
DialogTop: the distance from the desktop.
Center :{yes|no|1|0} : if the window is centered, the default is yes, but the height and width can still be specified.
Help :{yes|no|1|0} : whether to display the help button, default yes.
Resizable :{yes|no|1|0} [IE5+] : can the size be changed? No by default.
Status :{yes|no|1|0} [IE5+] : whether to display status bar. The default is yes[Modeless] or no[Modal].
Scroll :{yes|no|1|0|on|off} : indicates whether the dialog box displays scrollbar. The default is yes.

There are also several attributes that are used in htas that are not used in normal web pages.
DialogHide :{yes|no|1|0|on|off} : whether the dialog box is hidden when printing or printing preview. The default is no.
Edge: {sunken | raised} : specify the border style of the dialog box. The default is raised.
Unadorned: {yes | no | 1 | | 0 on | off} : the default value is no.

If vArguments is passed to window: 


var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);

Then in the child window, the following values are:
The browser Modal dialog box Window. The opener Window. DialogArguments ReturnValue    Internet explorer 9   a.   undefined   [object Window]   a.   Firefox13.0   a.   [objectWindow]   Window] [object    a.   safari5.1   a.   [objectWindow]   Window] [object    a.   chrome19.0   x   [objectWindow]   undefined   x

Notice that in the Firefox browser, window.dialogArguments will be lost if the subform is refreshed, becoming undefined. From the above results, we can see that the returnValue of returnValue is undefined only in the chrome browser, and there is no problem with other browsers

5. How to solve Chrome compatibility problems.
Direction is: set up the window. The opener. ReturnValue = ""
. The main HTML 


<HTML>  
<HEAD>  
<META NAME="GENERATOR" Content="oscar999">  
</HEAD>  
<script>
function showmodal()
{
  var ret = window.showModalDialog("sub.html?temp="+Math.random(),window);
  //for Chrome
  if(ret==undefined)
  {
    ret = window.returnValue;
  }
  alert("sub return value is "+ret);
}
</script>
<BODY>  
<INPUT id=button1 type=button value="open sub" name=button1 onclick="showmodal();">  
</BODY>  
</HTML>

Sub. HTML 

<HTML>  
<HEAD>  
<META NAME="GENERATOR" Content="oscar999">  
</HEAD>  
<script>
function returnMain()
{
  if(window.opener!=undefined)
  {
    window.opener.returnValue = "return from sub"; 
  }else{
    window.returnValue = "return from sub";
  }
  window.close();
}
</script>
<BODY>  
<INPUT id=button1 type=button value="return and close" name=button1 onclick="returnMain()">  
</BODY>  
</HTML>

This is to determine whether certain objects are defined to distinguish browsers. Of course, you can also judge the type of browser the way it is done

Here, the returnValue of the parent window is borrowed to be used. If the returnValue of the parent window is also used for other purposes, it can be replaced. As:
Var oldValue  = window. ReturnValue;
Var newValue = showModalDialog ()
Window. The returnValue = oldValue 

Related articles: