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 相关文章推荐
同时使用n个window onload加载实例介绍
Apr 25 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
Feb 03 Javascript
AngularJS实现路由实例
Feb 12 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
vue动画效果实现方法示例
Mar 18 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
解析smarty模板中类似for的功能实现
2013/06/18 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php文件读取方法实例分析
2015/06/20 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
用Python制作音乐海报
2021/01/26 Python
土木工程专业个人求职信
2013/12/05 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
户外宣传策划方案
2014/05/25 职场文书
个人委托书范本
2014/09/13 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers