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 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
js实现3D旋转效果
2020/08/18 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
超市实习总结自我鉴定
2013/09/19 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
对孩子的寄语
2014/04/09 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
大学感恩节活动总结
2015/05/05 职场文书
简爱电影观后感
2015/06/10 职场文书
锦旗赠语
2015/06/23 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript