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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
Javascript的一种模块模式
Sep 08 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
AngularJS入门教程之表格实例详解
Jul 27 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
js实现五星评价功能
2017/03/08 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
layui使用label标签的方法
2019/09/14 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
python中的列表与元组的使用
2019/08/08 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
一套软件测试笔试题
2014/07/25 面试题
微观物理专业自荐信
2014/01/26 职场文书
公务员考察材料
2014/12/23 职场文书
装修公司管理制度
2015/08/05 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技
httpclient调用远程接口的方法
2022/08/14 Java/Android