Example of js showModalDialog pop up window

  • 2020-03-30 01:15:43
  • OfStack

ShowModalDialog: Modal window, a very special window, when it opens, the parent window behind the activity stops, unless the current mode child window closed, to operate the parent window. When doing web Ajax development, sometimes we should use it to realize the form to fill in, or do similar online answer window. Its characteristic is that the very convenient also very strong, can be directly call variables and methods of the parent window.

Usage:  
VReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 

Parameter description:  
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.  

1. The dialogHeight:
  DialogHeight, not less than 100px, the default units of dialogHeight and dialogWidth in IE4 are em, while in IE5 is px. For convenience, when defining modal dialog, use px as unit.  

2. DialogWidth:  
  Dialog width.  

3. DialogLeft:
  The distance to the left of the screen.  

4. DialogTop:
  Distance from the screen.  

5. Center: {yes | no | 1 | 0} :
  Whether the window is centered defaults to yes, but you can still specify the height and width.  

6. Help: {yes | no | 1 | 0} :
  If the help button is displayed, the default is yes.  

7. Resizable: {yes | no | 1 | 0}
  [IE5+] : whether the size can be changed. No by default.  

8. Status: {yes | no | 1 | 0}
  [IE5+] : whether to display status bar. The default is yes[Modeless] or no[Modal].  

9. Scroll :{yes | no | 1 | 0 | on | off} :
  Indicates whether the dialog box displays a scroll bar. The default is yes.  
The following properties are used in HTA and are not used in normal web pages.  

DialogHide :{yes | no | 1 | 0 | on | off}
  Whether the dialog box is hidden while printing or printing preview. The default is no.  

11. Edge: {sunken | raised} :
Specifies the border style of the dialog box. The default is raised.  

12. Unadorned: {yes | no | 1 | | 0 on | off} :
  The default is no.

FOR example:
The parent. HTML


<script>
function setname(res){
document.getElementByIdx_x("name").value=res;
}
function selectTp(){
 //Pass the setname function of the parent window to the child window. ShowModalDialog ('child.html',setname,'dialogWitdh:300px; DialogHeight: 300 px; Center: yes; ');
}
</script>
<input type="button" value=" submit " onclick="selectTp()"/>
<input type="text" id="name" name='name'/>
child.html
 <SCRIPT LANGUAGE="JavaScript">
  <!--
 function setName(){
  var win="";
  if(window.dialogArguments!=null)
  {
//The child window gets the setname function of the parent window and manipulates the assignment
 win=window.dialogArguments;
 win('Jone');
  }
  this.close();
  }
  //-->
  </SCRIPT>
  <input type="button" value=" Assign a value to the parent window " onclick="setName()"/>


Related articles: