1. Basic knowledge
showModalDialog() (IE 4+ support) showModelessDialog () (supported by IE 5+) The window.showModalDialog() method is used to create a modal dialog that displays HTML content. The window.showModelessDialog() method is used to create a modeless dialog that displays HTML content.
2. How to use
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures]); vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures]);
3. Parameter description
| parameter name | nature | Types of | effect |
| sURL | required | string | Used to specify the URL of the web page to be displayed by the dialog. |
| Arguments | optional | Variants | Used to pass parameters to the dialog. The parameter type is not limited. The dialog gets the parameters passed in through window.dialogArguments. |
| sFeatures | optional | string | Used to describe the appearance of the dialog box and other information |
4. sFeatures parameter description
| parameter name | parameter properties | illustrate |
| dialogHeight | npx | Dialog height, not less than 100px |
| dialogWidth | npx | Dialog width |
| dialogLeft | npx | distance from the left of the main window |
| dialogTop | npx | distance from the main window |
| center | {yes | no | 1 | 0 } | Whether the window is centered, the default is yes |
| help | {yes | no | 1 | 0 } | Whether to display the help button, the default is yes |
| resizable | {yes | no | 1 | 0 } | Whether the size can be changed, the default is no |
| status | {yes | no | 1 | 0 } | Whether to display the status bar, the default is yes[Modeless] or no[Modal] |
| dialogHide | { yes | no | 1 | 0 | on | off } | Whether to hide the dialog box when printing or print preview, the default is no |
| scroll | { yes | no | 1 | 0 | on | off } | Indicates whether the dialog box displays scroll bars, the default is yes |
| edge | { sunken | raised } | Specifies the border style of the dialog box, the default is raised |
| unadorned | { yes | no | 1 | 0 | on | off } | Default is no |
| Note: The three attributes dialogHide, edge, and unadorned are used in HTA (HTML Aplication) and are not used on general web pages. |
5. Parameters are passed through vArguments. The type is not limited. For string type, the maximum length is 4096 characters. Objects can also be passed, such as
parent.htm
<script>
window.showModalDialog("sun.htm","parameters passed in","help:no;scroll:no");
</script>
sun.htm
<script>
alert("Passed parameters: " + window.dialogArguments);
</script>
6. The return value returns information to the window that opens the dialog box through window.returnValue, or it can be an object. E.g:
parent.htm
<script>
result=window.showModalDialog("son.htm","","help:no;scroll:no");
alert(result);
</script>
son.htm
<script>
window.returnValue="The returned result is stored here";
</script>
7. Prevent a new window from being opened in a modal window and
add <base target="_self"> before the <body> of the page
8. Call the method of the parent window while passing parameters
parent.htm
<script>
function show(){//Method of parent window
alert("show");
}
var arg=new Object();//The parameters passed in
arg.win=window;//Pass the reference to the current window as a parameter
arg.str="argument";//Other parameters to be passed in
window.showModalDialog("son.htm",arg,'help:no');
</script>
son.htm
<script>
var arg = window.dialogArguments;
alert (arg.str);
arg.win.show();//Call the method of the parent window
</script>