JS对话框_JS模态对话框showModalDialog用法总结


Posted in Javascript onJanuary 11, 2014

父窗口:

<html>
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function opendialog1()
 {
 var someValue=window.showModalDialog("b.html","","dialogWidth=500px;dialogHeight=500px;status=no;help=no;scrollbars=no");
 document.form1.p1t.value=someValue;
 }
</script>
</head>
<body>
<form name="form1" action="#">
<input type="text" name="p1t">
<input type="button" value="打开对话框" onclick="opendialog1()">
</form>
</body>
</html>

子窗口:
<html>
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function a()
{
var wname = document.form1.backname.value;
parent.window.returnValue=wname; //父窗口就是上一个页面
 window.close();
}
</script>
</head>
<body>
<form name="form1" action=""> 
<input type="text" value="输入要传的值" name="backname">
<input type="button" value="传值" onclick="return a()">
</form>
</body>
</html>

---- 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]打开时,打开对话框的窗口仍可以进行其他的操作,即对话框不总是最上面的焦点,当打开它的窗口URL改变时,它自动关闭。而模态[IE4]方式的对话框始终有焦点(焦点不可移走,直到它关闭)。模态对话框和打开它的窗口相联系,因此我们打开另外的窗口时,他们的链接关系依然保存,并且隐藏在活动窗口的下面。

使用方法如下:
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures])

参数说明:
sURL
必选参数,类型:字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
dialogHeight对话框高度,不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。
dialogWidth:对话框宽度。
dialogLeft:距离桌面左的距离。
dialogTop:离桌面上的距离。
center:{yes|no|1|0}:窗口是否居中,默认yes,但仍可以指定高度和宽度。
help:{yes|no|1|0}:是否显示帮助按钮,默认yes。
resizable:{yes|no|1|0}[IE5+]:是否可被改变大小。默认no。
status:{yes|no|1|0}[IE5+]:是否显示状态栏。默认为yes[Modeless]或no[Modal]。
scroll:{yes|no|1|0|on|off}:指明对话框是否显示滚动条。默认为yes。

还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{yes|no|1|0|on|off}:在打印或者打印预览时对话框是否隐藏。默认为no。
edge:{sunken|raised}:指明对话框的边框样式。默认为raised。
unadorned:{yes|no|1|0|on|off}:默认为no。

传入参数:
要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

test1.htm
====================
<script>
varmxh1=newArray("mxh","net_lover","孟子E章")
varmxh2=window.open("about:blank","window_mxh")
//向对话框传递数组
window.showModalDialog("test2.htm",mxh1)
//向对话框传递window对象
window.showModalDialog("test3.htm",mxh2)
</script>

test2.htm
====================
<script>
vara=window.dialogArguments
alert("您传递的参数为:"+a)
</script>

test3.htm
====================
<script>
vara=window.dialogArguments
alert("您传递的参数为window对象,名称:"+a.name)
</script>

可以通过window.returnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

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

test5.htm
===================
<script>
functionsendTo()
{
vara=newArray("a","b")
window.returnValue=a
window.close()
}
</script>
<body>
<form>
<inputvalue="返回"type=buttononclick="sendTo()">
</form>

常见问题:
1,如何在模态对话框中进行提交而不新开窗口?
如果你的浏览器是IE5.5+,可以在对话框中使用带name属性的iframe,提交时可以制定target为该iframe的name。对于IE4+,你可以用高度为0的frame来作:例子,

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

test7.htm
===================
if(window.location.search)alert(window.location.search)
<framesetrows="0,*">
<framesrc="about:blank">
<framesrc="test8.htm">
</frameset>

test8.htm
===================
<formtarget="_self"method="get">
<inputname=txtvalue="test">
<inputtype=submit>
</form>
<script>
if(window.location.search)alert(window.location.search)
</script>
2,可以通过http://servername/virtualdirname/test.htm?name=mxh方式直接向对话框传递参数吗?
答案是不能。但在frame里是可以的。

Javascript 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
jquery插件推荐浏览器嗅探userAgent
Nov 09 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 #Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 #Javascript
javascript遍历控件实例详细解析
Jan 10 #Javascript
关闭ie窗口清除Session的解决方法
Jan 10 #Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 #Javascript
JS实现根据出生年月计算年龄
Jan 10 #Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 #Javascript
You might like
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
优化PHP程序的方法小结
2012/02/23 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
php实现文件编码批量转换
2014/03/10 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
手写一个python迭代器过程详解
2019/08/27 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
PageFactory设计模式基于python实现
2020/04/14 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
迪奥官网:Dior.com
2018/12/04 全球购物
日本语毕业生自荐信
2014/02/01 职场文书
自荐信的基本格式
2014/02/22 职场文书
浪费资源的建议书
2014/03/12 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
python process模块的使用简介
2021/05/14 Python