program code
function openEgg(type){
window.showModalDialog('../EggPlay.aspx?type='+type,'','dialogHeight: 600px; dialogWidth: 800px; edge: Raised; center: Yes; help: No; resizable: No; status: No; scroll:No;');
}
Javascript has many built-in methods to generate dialog boxes, such as window.alert(), window.confirm(), window.prompt(), etc. However, IE provides more methods to support dialog boxes. Such as:
showModalDialog() (supported by IE 4+)
showModelessDialog() (supported by IE 5+)
The window.showModalDialog() method is used to create a modal dialog box that displays HTML content. Since it is a dialog box, it does not have all the properties of a window generally opened with window.open().
The window.showModelessDialog() method is used to create a modeless dialog box that displays HTML content.
When we use showModelessDialog() to open a window, we do not have to use window.close() to close it. When it is opened in non-modal mode [IE5], the window that opens the dialog box can still perform other operations, that is, the dialog box is not always open. It is the top focus and closes automatically when the URL of the window that opens it changes. The modal [IE4] dialog box always has focus (the focus cannot be removed until it is closed). The modal dialog box is linked to the window that opened it, so when we open another window, their link relationship is still preserved and hidden under the active window.
How to use it:
vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])
Parameter description:
sURL
Required parameter, type: string. Used to specify 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. The type of parameters passed is not limited, including arrays, etc. The dialog box obtains the parameters passed in through window.dialogArguments.
Features
Optional parameter, type: string. Used to describe the appearance of the dialog box and other information, you can use one or more of the following, separated by semicolons ";".
dialogHeight is the height of the dialog box, not less than 100px. The default unit of dialogHeight and dialogWidth in IE4 is em, while in IE5 it is px. For convenience, when defining a modal dialog box, use px as the unit.
dialogWidth: dialog box width.
dialogLeft: Distance from the left side of the desktop.
dialogTop: distance from the desktop.
center: {yes | no | 1 | 0}: Whether 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, the default is yes.
resizable: {yes | no | 1 | 0} [IE5+]: Whether it can be resized. The default is no.
status: {yes | no | 1 | 0} [IE5+]: Whether to display the status bar. Default is yes[Modal] or no[Modal].
scroll:{ yes | no | 1 | 0 | on | off }: Indicates whether the dialog box displays scroll bars. The default is yes.
There are also several attributes used in HTA, which are generally not used in ordinary web pages.
dialogHide:{ yes | no | 1 | 0 | on | off }: Whether the dialog box is hidden during printing or print preview. The default is no.
edge:{ sunken | raised }: Specifies the border style of the dialog box. The default is raised.
unadorned:{ yes | no | 1 | 0 | on | off }: The default is no.
Pass in parameters:
To pass parameters to the dialog box, they are passed through vArguments. There is no limit on the type. For string types, the maximum length is 4096 characters. You can also pass objects, for example:
program code
test1.htm
====================
<script>
var mxh1 = new Array("mxh","net_lover","Mencius Chapter E")
var mxh2 = window.open("about:blank","window_mxh")
// Pass array to dialog box
window.showModalDialog("test2.htm",mxh1)
// Pass the window object to the dialog box
window.showModalDialog("test3.htm",mxh2)
</script>
test2.htm
====================
<script>
var a = window.dialogArguments
alert("The parameters you passed are: " + a)
</script>
test3.htm
====================
<script>
var a = window.dialogArguments
alert("The parameter you passed is a window object, name: " + a.name)
</script>
Information can be returned to the window that opened the dialog box through window.returnValue, and of course it can also be an object. For example:
program code
test4.htm
===================
<script>
var a = window.showModalDialog("test5.htm")
for(i=0;i<a.length;i++) alert(a[i])
</script>
test5.htm
===================
<script>
function sendTo()
{
var a=new Array("a","b")
window.returnValue = a
window.close()
}
</script>
<body>
<form>
<input value="Return" type=button onclick="sendTo()">
</form>
FAQ:
1. How to submit in a modal dialog box without opening a new window?
If your browser is IE5.5+, you can use an iframe with a name attribute in the dialog box, and you can set the target to be the name of the iframe when submitting. For IE4+, you can use a frame with a height of 0: example,
program code
test6.htm
===================
<script>
window.showModalDialog("test7.htm")
</script>
test7.htm
===================
if(window.location.search) alert(window.location.search)
<frameset rows="0,*">
<frame src="/blog/about:blank">
<frame src="test8.htm">
</frameset>
test8.htm
===================
<form target="_self" method="get">
<input name=txt value="test">
<input type=submit>
</form>
<script>
if(window.location.search) alert(window.location.search)
</script>
2. Can parameters be passed directly to the dialog box through http://servername/virtualdirname/test.htm?name=mxh ?
The answer is no. But it is possible in the frame.