js showModalDialog弹出窗口实例详解


Posted in Javascript onJanuary 07, 2014

showModalDialog:模式窗口, 一种很特别的窗口,当它打开时,后面的父窗口的活动会停止,除非当前的模式子窗口关闭了, 才能操作父窗口.在做网页Ajax开发时,我们应该有时会用到它来实现表单的填写, 或做类似网上答题的窗口. 它的特点是,传参很方便也很强大,可直接调用父窗口的变量和方法.

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

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

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

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

1.dialogHeight :
  对话框高度,不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用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。 
下面几个属性是用在HTA中的,在一般的网页中一般不使用。 

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

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

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

FOR example:
parent.html

<script>
function setname(res){
document.getElementByIdx_x("name").value=res;
}
function selectTp(){
 //把父窗口的setname函数传给子窗口window.showModalDialog('child.html',setname,'dialogWitdh:300px;dialogHeight:300px;center:yes;');
}
</script>
<input type="button" value="提交" onclick="selectTp()"/>
<input type="text" id="name" name='name'/>
child.html
 <SCRIPT LANGUAGE="JavaScript">
  <!--
 function setName(){
  var win="";
  if(window.dialogArguments!=null)
  {
//子窗口获取父窗口的setname函数,并操作赋值
 win=window.dialogArguments;
 win('Jone');
  }
  this.close();
  }
  //-->
  </SCRIPT>
  <input type="button" value="给父窗口赋值" onclick="setName()"/>
Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 #Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 #Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 #Javascript
asp.net刷新本页面的六种方法总结
Jan 07 #Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 #Javascript
js如何获取兄弟、父类等节点
Jan 06 #Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 #Javascript
You might like
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
JS实现简易日历效果
2021/01/25 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python中PIL安装简单教程
2016/04/21 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
测试工程师岗位职责
2013/11/28 职场文书
档案室主任岗位职责
2014/02/12 职场文书
车辆转让协议书
2014/04/15 职场文书
门面房租房协议书
2014/08/20 职场文书
市场营销工作计划书
2014/09/15 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
民事代理词范文
2015/05/25 职场文书
环境卫生标语
2015/08/03 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
vue项目支付功能代码详解
2022/02/18 Vue.js
springboot入门 之profile设置方式
2022/04/04 Java/Android