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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
Jun 24 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
javascript的BOM汇总
Jul 16 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Angular4集成ng2-file-upload的上传组件
Mar 14 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue实现虚拟列表功能的代码
Jul 28 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
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
程序员岗位职责
2013/11/11 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
我爱我校演讲稿
2014/05/21 职场文书
新生入学欢迎词
2015/01/26 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书