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 相关文章推荐
为javascript添加String.Format方法
Aug 11 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jQuery实现转动随机数抽奖效果的方法
May 21 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
DIY实用性框形天线
2021/03/02 无线电
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
介绍下Lucene建立索引的过程
2016/03/02 面试题
教师师德教育的自我评价
2013/10/31 职场文书
八年级物理教学反思
2016/02/19 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
详解Python中下划线的5种含义
2021/07/15 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis