JS dialog box_JS modal dialog box showModalDialog usage summary_javascript skills

Parent window:

Copy code The code is as follows:

>
The code is as follows:

---- 1. 基本语法

---- window对象有一个方法称为showModalDialog ，我们可以在页面按钮的onclick中写如下代码：

< BUTTON onclick="window.showModalDialog
('dialog.htm')" >Search< /BUTTON >

---- 系统会在新窗口中打开dialog.htm页面，并且等待用户响应，如果用户不响应该页面，那么主页面将得不到光标。
---- 在dialog.htm中设置window对象的returnValue属性，就可以让主页面得到返回值。例如，在页面的确定按钮的onclick中写：

window.returnValue = window.
document.all.iptPeopleID.value

---- 将输入框iptPeopleID的值赋给window对象的returnValue属性。在主页面中就可以得到这个值：
var str = showModalDialog ("dialog1.htm")

---- 2. 传递初始化值
---- 如果要向模态页面中传递初始化值，可以在主页面中用如下语句：

var cSearchValue=showModalDialog
('dialog.htm', 'ABC')
在dialog.htm中使用window.dialogArguments
属性可以得到'ABC'。例如：
< SCRIPT FOR=window EVENT=onload LANGUAGE="JScript" >
if (window.dialogArguments != null)
window.document.all.iptPeopleID.value = window.dialogArguments;
< /SCRIPT >

---- 3. 传递多个数值
---- 如果要向模态页面中传递多个参数，可以先在主页面中定义一个对象，

function myDialog() {
var str1;
var str2;
}

---- 显示模态页面之前初始化该对象，然后调用showModalDialog 方法。
function WelcomeYou(iniStr1,iniStr2) {
myDialog.str1 = iniStr1;
myDialog.str2 =iniStr2 ;

if (showModalDialog ("dialog2.htm", myDialog)
==false) //将对象传入
......

---- 在模态页面中，可以用这样的代码
window.document.all.iptID.value=
window.dialogArguments.str1
来引用数值，或者用这样的代码对之赋值
window.dialogArguments.str1 =
window.document.all.iptID.value

---- 完整例程如下：
---- 对于只传递一个参数的情况，见：Main1.htm和dialog1.htm。

---- 对于传递多个参数的情况，见：Main2.htm和dialog2.htm。

父窗体：
dim xxx '返回值
dim yyy '传到子窗体的参数
var xxx = ShowModalDialog ('xxx.asp','yyy','dialogWidth:100px;DialogHeight=290px;status:no')
子窗体：
dim yyy '从父窗体传来的参数
dim xxx '传回父窗体的参数
yyy = window.dialogArguments
xxx = window.returnValue
 

window.dialogArguments的用法

Javascript有许多内建的方法来产生对话框，如：window.alert(),window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如：

showModalDialog()(IE4+支持)
showModelessDialog()(IE5+支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
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 parameters, 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.
sFeatures
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 dialog box height, not less than 100px. The default unit of dialogHeight and dialogWidth in IE4 is em, while in IE5 it is px. For the convenience of visualization, when defining a modal dialog box, use px as the unit.
dialogWidth: Dialog 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}[ＩＥ５＋]: Whether it can be resized. The default is no.
status:{yes|no|1|0}［IE5］: Whether to display the status bar. Default is yes[Modeless] or no[Modal].
scroll:{yes|no|1|0|on|off}: Indicate 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.

Passing 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. Objects can also be passed, for example:

test1.htm
====================
<script><br>varmxh1=newArray(" mxh","net_lover","Mencius Chapter E")<br>varmxh2=window.open("about:blank","window_mxh")<br>//Pass an array to the dialog box<br>window.showModalDialog(" test2.htm",mxh1)<br>//Pass the window object to the dialog box<br>window.showModalDialog("test3.htm",mxh2)<br></script>

test2.htm
====================
<script><br>vara=window.dialogArguments <br>alert("The parameters you passed are: " a)<br></script>

test3.htm
====================
<script><br>vara=window.dialogArguments <br>alert("The parameter you passed is a window object, name: " a.name)<br></script>

You can return information to the window that opened the dialog box through window.returnValue, and of course it can also be an object. For example:

test4.htm
===================
<script><br>vara=window.showModalDialog( "test5.htm")<br>for(i=0;i<a.length;i )alert(a[i])<br></script>

test5.htm
===================
<script><br>functionsendTo()<br> {<br>vara=newArray("a","b")<br>window.returnValue=a<br>window.close()<br>}<br></script>

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 the 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,

test6.htm
===================
<script><br>window.showModalDialog("test7 .htm")<br></script>

test7.htm
====================
if(window.location.search)alert(window.location .search)



< /frameset>

test8.htm
===================



<script><br>if(window.location.search) alert(window.location.search)<br></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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn