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继承用法实例分析
Feb 05 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
Scala解析Json字符串的实例详解
Oct 11 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
Javascript开发包大全整理
2006/12/22 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
整理Python中的赋值运算符
2015/05/13 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Unicode和Python的中文处理
2017/03/19 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python3 修改默认环境的方法
2019/02/16 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
硕士研究生个人求职信
2013/12/04 职场文书
英文导游欢迎词
2014/01/11 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
经典促销广告词大全
2014/03/19 职场文书
民生工作实施方案
2014/05/31 职场文书
自主招生学校推荐信
2014/09/26 职场文书
公司处罚决定书
2015/06/24 职场文书
学校运动会通讯稿
2015/07/18 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android