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 相关文章推荐
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 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
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
Javascript window对象详解
2014/11/12 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
区分python中的进程与线程
2020/08/13 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
美容院营销方案
2014/03/05 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
安全生产标语大全
2014/10/06 职场文书