WEB页子窗口(showModalDialog和showModelessDialog)使用说明


Posted in Javascript onOctober 25, 2009

使用环境:

showModalDialog

IE4以上版本

showModelessDialog

IE5以上
区别:

showModalDialog

被打开后就会始终保持输入焦点。无法操作主窗口,除非关闭对话框。

showModelessDialog

被打开后,用户可以随机切换输入焦点。只是主窗口被对话框挡住。
使用方法:

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])

vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明:

sURL

必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments

可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。

sURLsFeatures

可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。

1.dialogHeight 对话框高度,不小于100px,IE4中dialogHeight和dialogWidth 默认的单位是em,而IE5中是px

2. dialogWidth: 对话框宽度。

3. dialogLeft: 离屏幕左的距离。

4. dialogTop: 离屏幕上的距离。

5. center: { yes | no | 1 | 0 } : 是否居中,默认yes,但仍可以指定高度和宽度。

6. help: {yes | no | 1 | 0 }: 是否显示帮助按钮,默认yes。

7. resizable: {yes | no | 1 | 0 } [IE5+]: 是否可被改变大小。默认no。

8. status:{yes | no | 1 | 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9. scroll:{ yes | no | 1 | 0 | on | off }:是否显示滚动条。默认为yes。

10. dialogHide:{ yes | no | 1 | 0 | on | off }:在打印或者打印预览时对话框是否隐藏。默认为no。

11. edge:{ sunken | raised }:指明对话框的边框样式。默认为raised。

12. unadorned:{ yes | no | 1 | 0 | on | off }:默认为no。
例子:
f.html

<html> 
<head> 
<title>主窗口</title> 
<script type="text/javascript"> 
<!-- 
var child; 
function openDialogBox() 
{ 
child = window.showModalDialog('c.html',document.all["txt"],"dialogWidth=500px;dialogHeight=200px;"); 
} 
//--> 
</script> 
</head> 
<body> 
<input name="txt" type="text" disabled="disabled" /> 
<input name="btn" type="button" value="打开对话框" onClick="openDialogBox();" /> 
</body> 
</html>

c.html
<html> 
<head> 
<title>对话框</title> 
<script type="text/javascript"> 
<!-- 
function set() 
{ 
window.dialogArguments.value=document.all["txt"].value 
} 
//--> 
</script> 
</head> 
<body> 
<input name="txt" type="text"/> 
<input name="btn" type="button" value="设置" onClick="set();" /> 
</body> 
</html>
Javascript 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
浅谈Vue.js
Mar 02 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 #Javascript
javascript window对象属性整理
Oct 24 #Javascript
Javascript 模式实例 观察者模式
Oct 24 #Javascript
Jquery 弹出层插件实现代码
Oct 24 #Javascript
js 操作符实例代码
Oct 24 #Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 #Javascript
JS window.opener返回父页面的应用
Oct 24 #Javascript
You might like
php中的实现trim函数代码
2007/03/19 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jquery 插件学习(二)
2012/08/06 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
Python 线程池用法简单示例
2019/10/02 Python
python 伯努利分布详解
2020/02/25 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
python实现简单坦克大战
2020/03/27 Python
Python中logger日志模块详解
2020/08/04 Python
python 装饰器的使用示例
2020/10/10 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
大学生职业生涯规划方案
2014/01/03 职场文书
主题酒店策划书
2014/01/28 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers