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 相关文章推荐
javascript动态加载二
Aug 22 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
用原生js做单页应用
Jan 17 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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
PHP与SQL注入攻击[二]
2007/04/17 PHP
PHP常用函数小技巧
2008/09/11 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
javascript 常用功能总结
2012/03/18 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书