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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
微信小程序如何实现全局重新加载
Jun 05 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 n个不重复的随机数生成代码
2009/06/23 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
详解package.json版本号规则
2019/08/01 Javascript
python中列表元素连接方法join用法实例
2015/04/07 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
解读python logging模块的使用方法
2018/04/17 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Django实现学生管理系统
2019/02/26 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
python的Jenkins接口调用方式
2020/05/12 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
盛大二次面试题
2016/11/18 面试题
2014厂务公开实施方案
2014/02/17 职场文书
教师个人读书活动总结
2014/07/08 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
实习协议书范本
2014/09/25 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
Python标准库pathlib操作目录和文件
2021/11/20 Python
Golang 入门 之url 包
2022/05/04 Golang