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学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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上传文件的增强函数
2010/07/21 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
js分页工具实例
2015/01/28 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python drf各类组件的用法和作用
2021/01/12 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
学生自我鉴定
2013/12/18 职场文书
教师个人自我鉴定
2014/02/08 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
Golang gRPC HTTP协议转换示例
2022/06/16 Golang