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语言中的Literal Syntax特性分析
Mar 08 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 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版)
2012/08/21 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
QQ登录简单实现代码
2021/03/09 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
Python字符串处理实现单词反转
2017/06/14 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python实现的汉诺塔算法示例
2019/10/23 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
婚纱店策划方案
2014/05/22 职场文书
银行求职自荐信
2014/06/30 职场文书
2015年纪委工作总结
2015/05/13 职场文书
大学班长竞选稿
2015/11/20 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
选购到合适的激光打印机
2022/04/21 数码科技
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL