弹出网页对话框,弹出网页模式对话框

发布时间:2020-12-30编辑:脚本学堂
分享下弹出模式窗口,有关网页对话框的使用教程,网页对话框分为网页模式对话框和网页非模式对话框,需要的朋友参考下。

什么是网页对话框

网页对话框是指通过脚本代码打开一个新的窗口,并且该窗口可以有返回值。
网页对话框分为网页模式对话框和网页非模式对话框。有关网页对话框模式与非模式的介绍,参考链接:http://www.jb200.com/article/25231.html

对网页模式对话框进行说明:

1,弹出网页模式对话框:
格式:
var somevalue=window.showModalDialog(url[,Arguments[,Features]]);

参数说明:
url :指定url文件地址。

Argument :用于向网页对话框传递参数,传递参数的类型不限制,对于字符串类型,最大为4096字符。也可以传递对象。如index.html.在弹出的窗口中可通过var parameter=window.dialogArguments;获取传递来的参数。

Features:可选项。窗口对话框的设置参数。主要参数如下表:

 参数  说明
 

 dialogWidth :number  用于设置对话框的宽度
 dialogHeight :number  用于设置对话框的高度
 dialogTop :number  用于设置对话框窗口相对于桌面左上角的top位置
 dialogLeft :number  用于设置对话框窗口相对于桌面左侧的left位置
 center :{yes|no|1|0} 用于指定是否将对话框在桌面上居中,yes|1为居中,默认值为yes
 Help :{yes|no  1|0}  用于指定对话框窗口中是否显示上下文敏感的帮助图标。默认为yes
 scroll :{yes|no 1|0}  用于指定对话框中是否显示滚动条
 resizable :{yes|no 1|0}  用于指定对话框的大小是否可变。默认为no
 status :{yes|no 1|0}  用于指定对话框是否显示状态栏

例子,点击按钮后打开一网页模式对话框。
在网页对话框中选择一个值后关闭该模式对话框。
并将返回值传递到父窗口中。
 

复制代码 代码示例:
function openDialog()
{
var  somevalue=window.openModalDialog("test.jsp","","dialogWidth=400px;dialogHeight=300px;help=no;status=no")
document.form1.userName=somevalue;
}

在弹出的模式对话框中调用一个js函数向打开的窗口返回信息
 

复制代码 代码示例:
function action(user)
{
parent.window.returnValue=user;
window.close();
}

流程:
通过window.openModalDialog()打开一模式窗口,在打开的窗口中调用action()函数将返回值传递给打开的对话框。

其他说明:
1、弹出全屏显示的网页(模式)对话框
 

复制代码 代码示例:
function openDialog()
{
var width=screen.width;
var height=screen.height;
window.openModalDialog("test.jsp","","dialogWidth="+width+"px;dialogHeight="+height+"px;status=no");
}

2、建议参数传递方式:
window.showModalDialog("filename.htm",window)
//不管要操作什么变量,只直传递主窗口的window对象
在showModalDialog(或showModelessDialog)读取和设置时:
 

alert(window.dialogArguments.var_name)//读取var_name变量
window.dialogArguments.var_name="oyiboy"//设置var_name变量

也可以操作var_id变量
 

alert(window.dialogArguments.var_id)//读取var_id变量
window.dialogArguments.var_id="001"//设置var_id变量

还可以对主窗口的任何对象进行操作,如form对象里的元素。
 

window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

在父页面中用
 

onClick=""var reVal = window.showModalDialog('changephoto.htm','dialogWidth:500px;dialogHeight:300px;help:no');if (typeof(reVal) != 'undefined') {form.textname.value=reVal;}"" style=""cursor:hand "">点击这里修改图片

在字窗口'changephoto.htm'中打开一个框架集,框架集中包含一个asp文件,先将asp的值返回到changephoto.htm中 再将这个值返回到主页面中。
如下:
 

changephoto.htm: <input type=button onclick="onClose();" value=" 关 闭 ">
function onClose() { window.returnValue = form1.save.value;//也可以将window.returnValue改成window.dialogArguments.oblogform.blogimage.value window.close(); }

asp文件:
 

parent.document.form1.save.value ="值或变量";